CSS3變形是一些效果的集合昌妹，比如
平移柬批、旋轉(zhuǎn)、縮放和傾斜效果拐邪，每個效果都被稱作為變形函數(shù)（Transform Function）,它們可以操控元素發(fā)生旋轉(zhuǎn)慰毅、縮放、和平移等變化扎阶。這些效果在之前都需要依賴圖片汹胃、Flash或JavaScript才能完成。而使用純CSS來完成這些變形則無需加載這些額外的文件乘陪，再一次提升了你的開發(fā)效率统台，還提高了頁面的執(zhí)行效率。
-
2D
函數(shù)名稱|語義| 參數(shù) | 前綴| 正負值| 單位|
-------|----|----|----|----|----|----|----|
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ù) | 前綴| 正負值| 單位|
-------|----|----|----|----|----|----|----|
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
-
兼容性
| 瀏覽器（PC） | 前綴 |
|---|---|
IE9 |
-ms- |
IE10+ |
支持標準版本 |
Firefox3.5 ~ Firefox15.0 |
-moz- |
Firefox16+ |
支持標準版本 |
Chrome4.0+ |
-webkit- |
Safari3.1+ |
-webkit- |
Opera10.5+ |
-o- |
Opera12.1 |
支持標準版本 |
Opera15.0+ |
-webkit- |
| 瀏覽器（Phone） | 前綴 |
|---|---|
iOS Safari3.2+ |
-webkit- |
Android Browser2.1+ |
-webkit- |
Blackberry Browser7.0+ |
-webkit- |
Opera Mobile14.0+ |
-webkit- |
Chrome for Android25.0+ |
-webkit- |
Opera Mobile11.0 ~ Opera Mobile12.1 |
支持標準版本 |
Firefox for Android19.0+ |
支持標準版本 |
參考
transform-origin詳解 ↓
http://www.w3cplus.com/css3/transform-origin.html
transform詳解 ↓
http://www.w3cplus.com/css3/css3-2d-transform.html
