1transform屬性 　　在CSS3中，可以利用transform功能實現文字或影象的旋轉、縮放、傾斜、移動這4中型別的變形處理。 　　（1）瀏覽器支援 　　到目前為止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上瀏覽器支援該屬性。 　　2旋轉 　　使用rotate方法，在引數中加入角度值，角度值後面跟表示角度單位的“deg”文字即可，旋轉方向為順時針方向。 　　transform：rotate（45deg）； 　　3縮放 　　使用scale方法來實現文字或影象的縮放處理，在引數中指定縮放倍率。 　　transform：scale（0.5）；//縮小一半 　　（1）可以分別指定元素的水平方向的放大倍率與垂直方向的放大倍率 　　transform：scale（0.5，2）；//水平方向縮小一半，垂直方向放大一倍。 　　4傾斜 　　使用skew方法實現文字或影象的傾斜處理，在引數中分別指定水平方向上的傾斜角度與垂直方向上的傾斜角度。 　　transform：skew（30deg，30deg）；//水平方向上傾斜30度，垂直方向上傾斜30度。 　　（1）只使用一個引數，省略另一個引數 　　這種情況下視為只在水平方向上進行傾斜，垂直方向上不傾斜。 　　transform：skew（30deg）； 　　5移動 　　使用translate方法來移動文字或影象，在引數中分別指定水平方向上的移動距離與垂直方向上的移動距離。 　　transform：translate（50px，50px）；//水平方向上移動50px，垂直方向上移動50px 　　（1）只使用一個引數，省略另一個引數 　　這種情況下視為只在水平方向上移動，垂直方向上不移動。 　　transform：translate（50px）； 　　6對一個元素使用多種變形的方法 　　transform：translate（150px，200px）rotate（45deg）scale（1.5）； 　　7指定變形的基準點 　　在使用transform方法進行文字或影象變形的時候，是以元素的中心點為基準點進行變形的。 　　transform-origin屬性 　　使用該屬性，可以改變變形的基準點。 　　transform：rotate（45deg）； 　　transform-origin：leftbottom；//把基準點修改為元素的左下角 　　（1）指定屬性值 　　基準點在元素水平方向上的位置：left、center、right 　　基準點在元素垂直方向上的位置：top、center、bottom 　　83D變形功能 　　（1）旋轉 　　分別使用rotateX方法、rotateY方法、rotateZ方法使元素圍繞X軸、Y軸、Z軸旋轉，在引數中加入角度值，角度值後面跟表示角度單位的deg文字即可，旋轉方向為順時針旋轉。 　　transform：rotateX（45deg）； 　　transform：rotateY（45deg）； 　　transform：rotateZ（45deg）； 　　transform：rotateX（45deg）rotateY（45deg）rotateZ（45deg）； 　　transform：scale（0.5）rotateY（45deg）rotateZ（45deg）； 　　（2）縮放 　　分別使用scaleX方法、scaleY方法、scaleZ方法使元素按X軸、Y軸、Z軸進行縮放，在引數中指定縮放倍率。 　　transform：scaleX（0.5）； 　　transform：scaleY（1）； 　　transform：scaleZ（2）； 　　transform：scaleX（0.5）scaleY（1）； 　　transform：scale（0.5）rotateY（45deg）； 　　（3）傾斜 　　分別使用skewX方法、skewY方法使元素在X軸、Y軸上進行順時針方向傾斜（無skewZ方法），在引數中指定傾斜的角度 　　transform：skewX（45deg）； 　　transform：skewY（45deg）； 　　（4）移動 　　分別使用translateX方法、translateY方法、translateZ方法、使元素在X軸、Y軸、Z軸方向上進行移動，在引數中加入移動距離。 　　transform：translateX（50px）; 　　transform：translateY（50px）; 　　transform：translateZ（50px）; 　　9變形矩陣 　　每種變形方法的背後都存在著一個對應的矩陣。 　　（1）計算2D變形（3X3矩陣） 　　\begin{bmatrix}a&c&e\\b&d&f\\0&0&1\end{bmatrix} 　　可以將這個2D變形矩陣書寫為matrim（a,b,c,d,e,f）,a~f均代表一個數字，用於決定怎樣執行變形處理。 　　（2）平移的2D矩陣 　　\begin{bmatrix}1&0&tx\\0&1&ty\\0&0&1\end{bmatrix} 　　//效果一致：右移150px，下移150px 　　transform：matrix（1，0,0,1，150，150）； 　　transform：translate（150px，150px）； 　　（3）計算3D變形 　　3D縮放變形使用的4X4矩陣 　　\begin{bmatrix}sx&0&0&0\\0&sy&0&0\\0&0&sz&0\\0&0&0&1\end{bmatrix} 　　transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1); 　　//效果一致：X軸方向上縮小五分之一，Y軸方向上縮小一半。 　　transform:scale3d(0.8,0.5,1); 　　transform:matrix3d(0.8,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1); 　　（4）可通過矩陣執行多重變形處理 　　將需要的變形矩陣相乘得到一個新的變形矩陣可實現該處理。