在CSS3中，可以利用transform功能來實現文字或圖像的旋轉、扭曲、縮放、位移、矩陣、原點這六種類型的變形處理，下面將詳細講解transform的使用。
變形--旋轉 rotate()div.box{transform: rotate(45deg);} /*順時針旋轉45度*/
變形--扭曲 skew()
div.box{transform:skew(45deg);} /*通過skew（）函數將長方形變成平行四邊形。 Skew()具有三種情況： 1、skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）； 2、skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）； 3、skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）*/
變形--縮放 scale()
div.box{transform: scale(1.5,0.5);} /* 縮放 scale 具有三種情況： 1、 scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放） 2、scaleX(x)元素僅水平方向縮放（X軸縮放） 3、scaleY(y)元素僅垂直方向縮放（Y軸縮放） scale()的取值默認的值為1，當值設置為0.01到0.99之間的任何值，作用使一個元素縮小；而任何大於或等於1.01的值，作用是讓元素放大。 */
變形--位移 translate()
div.box{transform: translate(50px,100px);} /* 通過translate()函數將元素向Y軸下方移動50px,X軸右方移動100px。 translate我們分為三種情況： 1、translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動） 2、translateX(x)僅水平方向移動（X軸移動） 3、translateY(Y)僅垂直方向移動（Y軸移動） */
變形--矩陣 matrix ()
div.box{transform: matrix(1,0,0,1,100,100);} /* matrix() 6個屬性的意思的：第一個寬度比例1就是原大小， 第二個是上下傾斜1就是2倍，2就是3倍，0就是不傾斜 第三個是左右傾斜，數字和第二個一樣的意思， 第四個是高度比例1就是原大小， 第五個是X方向的像素位移，X方向就是左右， 第六個是Y方向的像素位移，X方向就是上下 */
變形--原點 transform-origin
div.box{transform-origin: left top;transform: rotate(45deg); } /* 改變元素原點到左上角，然后進行順時旋轉45度。*/