transform 屬性應用於2D 或 3D 轉換。該屬性允許我們對元素進行平移、旋轉、縮放或傾斜。

一.translate(x,y)定義2D平移轉換

　　根據左(X軸)和頂部(Y軸)位置給定的引數，從當前元素位置移動。

　　  若translate(x,y)只定義一個數值，預設y=0。

　　 如下程式碼中：translate(50px,100px)表示從左向右移動50個畫素，並從上向下移動100畫素

div 
{ 
transform: translate(50px,100px); 
-ms-transform: translate(50px,100px); /* IE 9 */ 
-webkit-transform
 
: translate(50px,100px); /* Safari and Chrome */ 
}  

　　效果如下所示：

二.rotate(angle)定義2D旋轉轉換

　　定義 2D 旋轉，在引數中規定角度。

　　angle為正值表示順時針旋轉，angle為負值表示逆時針旋轉。

　　如下程式碼中，rotate(30deg)表示元素順時針旋轉30度。

div 
{ 
transform: rotate(30deg); 
-ms-transform: rotate(30deg); /* IE 9 */ 
-webkit-transform: rotate(30deg); /* Safari and Chrome 
 
*/ 
}  

　　效果如下所示：

　　注：transform-origin 可以設定旋轉基點位置，預設是中心點。

　　語法：transform-origin: x-axis y-axis

三、scale(x,y)定義2D縮放轉換

 　　scale(x,y)方法，元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的引數。

　　若只寫一個值，表示x=y

　　如下程式碼中，scale(1.4,1.5)縮放寬度為原來的1.4倍，高度為原來的1.5倍。

div 
{ 
transform: scale(1.4,1.5); 
-ms-transform: scale(1.4,1.5); /* IE 9 */ 
-webkit-transform: scale(1.4,1.5); /* Safari and Chrome */ 
}  

　　效果如下所示：

四.skew(x-angle,y-angle)、skewX(angle)、skewY(angle)定義2D傾斜轉換

　　skew(x-angle,y-angle)方法中，x-angle表示x軸方向傾斜的角度，y-angle表示y軸方向傾斜的角度。

　  若只寫一個值，表示第二個引數預設為0。

　　skewX( );表示只在X軸(水平方向)傾斜。

　  skewY( );表示只在Y軸(垂直方向)傾斜。

　  如下程式碼中，

div
{
    transform:skew(10deg,20deg);
    -ms-transform:skew(10deg,20deg); /* IE 9 */
    -webkit-transform:skew(10deg,20deg); /* Safari and Chrome */
}

　　效果如下圖所示：