CSS3变形是一些效果的集合，比如
平移、旋转、缩放和倾斜效果，每个效果都被称作为变形函数（Transform Function）,它们可以操控元素发生旋转、缩放、和平移等变化。这些效果在之前都需要依赖图片、Flash或JavaScript才能完成。而使用纯CSS来完成这些变形则无需加载这些额外的文件，再一次提升了你的开发效率，还提高了页面的执行效率。
-
2D
函数名称|语义| 参数 | 前缀| 正负值| 单位|
-------|----|----|----|----|----|----|----|
translate |移动| (tx,ty)| Y| Y| px、%、em
rotate |旋转| (a)| Y| Y| deg
skew |倾斜|(ax,ay) | Y| Y| deg
scale |缩放| (sx,xy)| Y| Y| 浮点数、整数
matrix |矩阵变形| (a,b,c,d,e,f)| Y| Y| px、%、em
-
3D
函数名称|语义| 参数 | 前缀| 正负值| 单位|
-------|----|----|----|----|----|----|----|
translateZ、translate3d |移动| | Y| Y| px、%、em
rotateY、rotateX、rotateZ、rotate3d |旋转| | Y| Y| deg
scaleZ、scale3d |缩放| | Y| Y| 浮点数、整数
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
