每天CSS學習之transform

標籤：nbsp   width   技術   縮小   for   ati   1.5   css   scale   

transform是CSS3的一個屬性，其作用是用來進行2D或3D變換。

一、2D變換

1. translate(x-offset , y-offset)

translate的作用就是用作位置的移動。x-offset是距離left的位置，y-offset是距離top的位置。該方法的位移不會脫離文檔流。

如：

.trans{                    width:200px;    height:50px;    border:1px solid red;        background-color:black;    color:red;    transform:translate(50px,50px);}

結果：

 

 2.rotate(角度)

rotate的作用是水平順時針旋轉映像。如果角度為負數，則往逆時針旋轉映像。

未旋轉映像時：

            .trans{                                position:relative;                top:100px;                left:100px;                width:200px;                height:50px;                border:1px solid red;                    background-color:black;                color:red;                }

旋轉90度時：

            .trans{                                position:relative;                top:100px;                left:100px;                width:200px;                height:50px;                border:1px solid red;                    background-color:black;                color:red;                                transform:rotate(90deg);                            }

3.scale(width的倍數，height的倍數);

scale的作用是按照寬和高的倍數展開或縮小當前元素。

未展開之前：

            .trans{                                position:relative;                top:100px;                left:100px;                width:200px;                height:50px;                border:1px solid red;                    background-color:black;                color:red;                }

按照寬的1.5倍，高度的2倍展開之後：

            .trans{                                position:relative;                top:100px;                left:100px;                width:200px;                height:50px;                border:1px solid red;                    background-color:black;                color:red;                                transform:scale(1.5,2);                            }

4.skew(X旋轉軸傾斜Y軸的度數,Y旋轉軸傾斜X軸的度數);

skew，顧名思義，歪曲、傾斜的意思。以元素中心為傾斜點，先以X軸為旋轉軸，傾斜Y軸，然後再以Y軸為旋轉軸，傾斜X軸。如果度數為負的就向相反的方向傾斜。

取X旋轉軸的值，X旋轉軸的的絕對值必須在0到90度之間，如果該絕對值大於了90度，如果該旋轉軸值為正數，該值就需要減去180，【如果為負數，就需要加上180】，一直到得到的結果的絕對值在0到90度之間的第一個值，如果結果為正，就向前傾斜，如果為負，就向後傾斜；如果是90度的話，元素就不可見了。

X旋轉軸傾斜Y軸的度數 的正方向是向前傾斜，負方向向後傾斜。

Y旋轉軸傾斜X軸的度數 的正方向是向右傾斜，負方向向左傾斜。

如下效果：

向前傾斜：

transform:skew(30deg,0);
或者transform:skew(-150deg,0); //-150+180= 30 deg

 

向後傾斜：

transform:skew(150deg,0); //150-180= -30 deg      
或者transform:skew(-30deg,0); 

 

向右傾斜：

transform:skew(0,30deg);
或者transform:skew(0,-150); //-150+180= 30 deg

 

向左傾斜：

transform:skew(0,-30deg);    
或者transform:skew(0,150deg); //150-180= -30deg

 

每天CSS學習之transform