CSS3-transform 轉換/變換

時間 2019-11-24

標籤 css3 css transform 轉換變換欄目 CSS 简体版

原文原文鏈接

transformweb

向元素應用 2D 或 3D 轉換。該屬性容許咱們對元素進行旋轉、縮放、移動或傾斜。spa

兼容性： Internet Explorer 十、Firefox、Opera 支持 transform 屬性。firefox

Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用於 2D 轉換）。3d

Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉換）。code

Opera 只支持 2D 轉換。orm

兼容性寫法： -ms-transform:rotate(20deg); /* IE 9 */blog

-webkit-transform:rotate(20deg); /* Safari and Chrome */ci

-moz-transform:rotate(20deg); /* firefox */it

-o-transform:rotate(20deg);/* Opera */io

語法：

//2d旋轉

ransform ：rotate(angle) | rotataX(angle) | rotateY(angle) | rotateZ(angle)

//3d旋轉

transform ：rotate(X,Y,z | angle)

//矩陣

transform: matrix(a,b,c,d,e,f)

//傾斜

skew(X,Y)

//縮放

scale(X,Y)

旋轉：rotate（angle）

rotate（angle），經過指定的角度對元素進行2D旋轉，正值時順時針旋轉，負值時將逆時針旋轉。

transform：rotate(-20deg)

<div class="rotate">
        <div><span>我不想旋轉</span></div>
</div>
<style>
.rotate div{
            width: 100px;
            height: 100px;
            line-height: 100px;
            background: green;
            color: #fff;
        }
 .rotate:hover div{
            width: 100px;
            height: 100px;
            line-height: 100px;
            background: green;
            color: #fff;
            -webkit-transform: rotate(-20deg);
            -moz-transform: rotate(-20deg);
            transform:rotate(-20deg);
            margin-bottom:20px;
            cursor: pointer;
            transition: 0.5s ease-out;
        }
        .rotate span {
            display:block;
            -webkit-transform: rotate(20deg);
            -moz-transform: rotate(20deg);
            transform:rotate(20deg);
        }
</style>

縮放：scale（）

縮放scale（）具備三種狀況：scale(x，y)表示X、Y軸同時放縮（若是隻給一個值，x、y軸同時縮放相同倍數，給2個不一樣得值則根據所給數值進行縮放）；scaleX（x）僅向水平方向縮放（x軸）；scaleY（y）僅向垂直方向縮放（y軸）；但他們的縮放中心點是同樣的，中心點就是元素中心的位置，縮放倍數小於1表示縮小X唄，大於1表示放大x倍。

transform：scale(0.8) /*縮小0.8倍*/

<div class="scale">
        <div class="scale1"></div>
</div>
<style>
.scale{
            width: 200px;
            height: 200px;
            border: 1px dashed #000;
        }
.scale1{
            width: 198px;
            height: 198px;
            background: #ffc0cb;
        }
.scale1:hover{
            transition: 0.2s;
            transform: scale(0.8);
            -webkit-transform: scale(0.8);
            -moz-transform: scale(0.8);
            opacity: 0.9;
            cursor: pointer;
        }
</style>

transform：scale(1.5,0.8) /*沿x軸放大1.5倍，沿y軸縮小0.8倍*/

<div class="scale">
        <div class="scale2"></div>
</div>
<style>
.scale{
            width: 200px;
            height: 200px;
            border: 1px dashed #000;
        }
.scale2{
            width: 198px;
            height: 198px;
            background: #ffc0cb;
        }
.scale2:hover{
            transition: 0.2s;
            transform:scale(1.5,0.8);
            -webkit-transform: scale(1.5,0.8);
            -moz-transform: scale(1.5,0.8);
            opacity: 0.9;
            cursor: pointer;
        }
</style>

transform：scaleX(1.5) /*沿x軸放大1.5倍*/

<div class="scale">
        <div class="scale3"></div>
</div>
<style>
.scale{
            width: 200px;
            height: 200px;
            border: 1px dashed #000;
        }
.scale3{
            width: 198px;
            height: 198px;
            background: #ffc0cb;
        }
        .scale3:hover{
            transition: 0.2s;
            transform: scaleX(3);
            -webkit-transform: scaleX(3);
            opacity: 0.9;
            cursor: pointer;
        }
</style>

位移：translate（）

位移：translate（）也具備三種狀況：translate（x，y）水平方向和垂直方向同時移動（x軸y軸同時移動）；translateX（x）僅水平方向移動（X軸移動）；translateY（y）僅水平方向移動（X軸移動）

translate（20px,10px）

<div class="scale">
        <div class="translate1">translate(20px,10px)</div>
</div>
<style>
.scale{
            width: 200px;
            height: 200px;
            border: 1px dashed #000;
        }
.translate1{
            width: 200px;
            height: 200px;
            background: lime;
            cursor: pointer;
        }
.translate1:hover{

            transform: translate(20px,10px);
            -webkit-transform:translate(20px,10px);
            background: #ffc0cb;
            transition: 1s;
        }
</style>

translateX（100px）

<div class="scale">
        <div class="translate2">translateX(100px)</div>
</div>
<style>
.scale{
            width: 200px;
            height: 200px;
            border: 1px dashed #000;
        }
.scale2{
            width: 198px;
            height: 198px;
            background: #ffc0cb;
        }
.scale2:hover{
            transition: 0.2s;
            transform:scale(1.5,0.8);
            -webkit-transform: scale(1.5,0.8);
            -moz-transform: scale(1.5,0.8);
            opacity: 0.9;
            cursor: pointer;
        }
</style>

translateY（100px）

<div class="scale">
        <div class="translate3">translateY(100px)</div>
</div>
<style>
.scale{
            width: 200px;
            height: 200px;
            border: 1px dashed #000;
        }
.scale3{
            width: 198px;
            height: 198px;
            background: #ffc0cb;
        }
.scale3:hover{
            transition: 0.2s;
            transform: scaleX(3);
            -webkit-transform: scaleX(3);
            opacity: 0.9;
            cursor: pointer;
        }
</style>

扭曲/傾斜：skew（）

一樣，扭曲：skew（）也具備三種狀況：skew(x,y)水平方向和垂直方向同時發生扭曲變形（x軸y軸扭曲變形，第二個參數爲可選參數，若是不填表示Y軸爲0deg）；skewX（x）僅水平方向發生扭曲（X軸扭曲），skewY（y）僅水平方向發生扭曲（X軸扭曲）

transform: skew(20deg,30deg)

<div class="skew">
        <div>
            <span>我是文字，我決定不被扭曲</span>
        </div>
</div>
<style>
.skew{
            width:200px;
            height: 200px;
            border: 1px dashed #000;
            margin-left: 200px;
            margin-top: 50px;
        }
.skew div{
            width:200px;
            height: 200px;
            background: orange;
            transform: skew(20deg,30deg);
            -webkit-transform: skew(20deg,30deg);
        -moz-transform: skew(20deg,30deg);
        -o-transform: skew(20deg,30deg);
        -ms-transform: skew(20deg,30deg);
        }
.skew span{
            display: block;
            transform: skew(-20deg,-30deg);
            -webkit-transform: skew(-20deg,-30deg);
        -moz-transform: skew(-20deg,-30deg);
        -o-transform: skew(-20deg,-30deg);
        -ms-transform: skew(-20deg,-30deg);
        }
</style>

transform: skew(20deg)/*等價於：transform: skewX(20deg)*/

<div class="skew1">
        <div>
            <span>不填Y的參數，看效果</span>
        </div>
</div>
<style>
.skew1{
            width:200px;
            height: 200px;
            border: 1px dashed #000;
            margin-left: 200px;
            margin-top: 50px;
        }
 .skew1 div{
            width:200px;
            height: 200px;
            background: orange;
            transform: skew(20deg);
            -webkit-transform: skew(20deg);
        -moz-transform: skew(20deg);
        -o-transform: skew(20deg);
        -ms-transform: skew(20deg);
        }
 .skew1 span{
            display: block;
            transform: skew(-20deg);
            -webkit-transform: skew(-20deg);
        -moz-transform: skew(-20deg);
        -o-transform: skew(-20deg);
        -ms-transform: skew(-20deg);
        }
</style>

transform: skewY(30deg)

<div class="skew2">
       <div>
            <span>Y軸扭曲</span>
        </div>
</div>
<style>
.skew2{
            width:200px;
            height: 200px;
            border: 1px dashed #000;
            margin-left: 200px;
            margin-top: 50px;
            margin-bottom: 100px;
        }
.skew2 div{
            width:200px;
            height: 200px;
            background: orange;
            transform: skewY(30deg);
            -webkit-transform: skewY(30deg);
            -moz-transform: skewY(30deg);
            -o-transform: skewY(30deg);
        -ms-transform: skewY(30deg);
        }
.skew2 span{
            display: block;
            transform: skewY(-30deg);
            -webkit-transform: skewY(-30deg);
        -moz-transform: skewY(-30deg);
        -o-transform: skewY(-30deg);
        -ms-transform: skewY(-30deg);
        }
</style>

矩陣：matrix（a,b,c,d,e,f）

transform:matrix(1,0,0,1,0,0)
/**********************/
/*矩陣：matrix(a,b,c,d,e,f)
*a:水平縮放 1爲原始大小應用：scale（）
*b:縱向扭曲（拉伸） 0爲不變應用：skew（）
*c:橫向扭曲（拉伸） 0爲不變
*d:垂直縮放 1爲原始大小
*e:水平偏移量 0是初始位置應用：translate（）
*f:垂直偏移量 0是初始位置
*/
/**********************/

transform: matrix(0.8,0,0,0.8,10,10);
/*transform: matrix(水平縮小0.8倍,水平拉伸0,垂直拉伸0,垂直縮小0.8倍,水平偏移10px,垂直偏移10px)*/

<div class="matrix">
    <div></div>
</div>
<style>
.matrix{
width:200px;
height:200px;
border: 1px dashed #000;
}
.matrix div{
            width: 200px;
            height: 200px;
            background: red;
        }
.matrix div:hover{
            cursor: pointer;
            background: #ffff00;
            transform: matrix(0.8,0,0,0.8,10,10);
            -webkit-transform: matrix(0.8,0,0,0.8,10,10);
        -moz-transform:matrix(0.8,0,0,0.8,10,10);
        -o-transform: matrix(0.8,0,0,0.8,10,10);
        -ms-transform: matrix(0.8,0,0,0.8,10,10);
            transition: 0.5s;
        }
</style>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。