css3 速查表-Transform

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