在css3中，可以利用transform功能實現文字或圖像的旋轉、縮放、傾斜、移動這四種類型的變形處理，這四種效果使用的先後順序不同，頁面顯示的也會有所不同。

1、transform功能的分類

1.1縮放

　　使用scale方法來實現文字或圖像的縮放處理，在參數中指定縮放倍率，比如scale（0.5）表示縮小一半，也可以同時指定元素水平方向和垂直方向的放大倍率，用逗號隔開。

1.2傾斜

　　使用skew方法實現文字或圖像的傾斜處理，在參數中分別指定元素在水平方向和垂直方向上的傾斜角度，例如skew（30deg,30deg），表示水平和垂直方向各順時針傾斜30度，當只有一個參數時，表示水平方向傾斜，垂直方向不傾斜

1.3移動

　　使用translate方法來移動文字或圖像，在參數中分別指定水平和垂直方向上的移動距離，只寫一個參數時，表示只有水平方向移動。

2、對一個元素使用多種變形

2.1對一個元素使用多種變形

2.2指定變形的基準點

　　在使用transform方法進行文字或圖像變形的時候，是以元素的中心點為基準點，使用transform-origin屬性，可以改變變形的基準點。

3、使用3D變形功能

3.1 3D變形概述

　　2009年3月，CSS 3D Transform模型正式推出，該模型是對CSS 2D Transform模型的一個擴展，其中添加了一些特性，其中包括在3D空間中實現透視投影、旋轉及變形特效。

3.2 旋轉

　　與2D旋轉功能實現方法類似，可以分別使用rotateX、rotateY、rotateZ方法使元素圍繞X軸、Y軸、Z軸旋轉，在參數中加入角度值，角度值後面跟表示角度的單位deg文字即可，旋轉方向為順時針。可以將3D變形方法寫在一行樣式代碼中，比如：

.transform1{
    transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg);
    background:  red;
    margin-top:  50px;
    width: 200px;
}

3.3 縮放

　　與2D縮放功能實現方法類似，可以分別使用scaleX、scaleY、scaleZ方法使元素按X軸、Y軸、Z軸縮放，在參數中指定縮放倍率，比如scaleX（0.5）表示水平方向上縮小一半，scaleZ（2）表示在Z軸上放大一倍。

3.4 傾斜

　　可以分別使用skewX方法及skewY方法使元素在X軸及Y軸上進行順時針方向傾斜，註意沒有在skewZ方法，因為傾斜使二維變形，不能在三維空間傾斜。

3.5 移動

　　可以分別使用translateX、translateY、translateZ方法使元素在X軸、Y軸、Z軸（正數是前移）方向上進行移動，在參數中加入移動距離。

4、變形矩陣

　　矩陣函數matrix()函數與matrix3d()是理解CSS3中變形技術的關鍵。在大多數時候，為了簡單起見，你可以直接使用rotate()與skewY()之類的方法，但是在每一種變形方法的背後都存在著一個對應的矩陣。

4.1 變形與坐標系統

　　對於計算機世界的坐標系統，每一個頁面都是一個坐標系統，原點為坐標系統的左上角，坐標位置為（0，0）。X軸方向為從左向右，Y軸為從上往下，Z軸決定閱讀者與頁面之間的距離。Z坐標值越大代表距離越近，Z軸值越小代表距離越遠。

　　當對一個對象應用變形時，首先建立本地坐標系統。在默認情況下，本地坐標系統中的原點在對象正中央。

4.2 計算2D變形（3*3矩陣）

4.3 計算3D變形（4*4矩陣）

七、CSS3中的變形處理