CSS3變形是一些效果的集合，比如平移、旋轉(zhuǎn)、縮放和傾斜效果，每個效果都被稱作為變形函數(shù)（Transform Function）,它們可以操控元素發(fā)生旋轉(zhuǎn)、縮放、和平移等變化。這些效果在之前都需要依賴圖片、Flash或JavaScript才能完成。而使用純CSS來完成這些變形則無需加載這些額外的文件，再一次提升了你的開發(fā)效率，還提高了頁面的執(zhí)行效率。

• 2D

函數(shù)名稱|語義| 參數(shù) | 前綴| 正負(fù)值| 單位|
-------|----|----|----|----|----|----|----|
translate |移動| (tx,ty)| Y| Y| px、%、em
rotate |旋轉(zhuǎn)| (a)| Y| Y| deg
skew |傾斜|(ax,ay) | Y| Y| deg
scale |縮放| (sx,xy)| Y| Y| 浮點數(shù)、整數(shù)
matrix |矩陣變形| (a,b,c,d,e,f)| Y| Y| px、%、em

• 3D

函數(shù)名稱|語義| 參數(shù) | 前綴| 正負(fù)值| 單位|
-------|----|----|----|----|----|----|----|
translateZ、translate3d |移動| | Y| Y| px、%、em
rotateY、rotateX、rotateZ、rotate3d |旋轉(zhuǎn)| | Y| Y| deg
scaleZ、scale3d |縮放| | Y| Y| 浮點數(shù)、整數(shù)
matrix3d |矩陣變形| | Y| Y| px、%、em

• 兼容性

參考

transform-origin詳解 ↓
http://www.w3cplus.com/css3/transform-origin.html
transform詳解 ↓
http://www.w3cplus.com/css3/css3-2d-transform.html