transform

transform属性向元素应用 2D 或 3D 转换。允许我们对元素进行旋转、缩放、移动或倾斜。
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。

语法

transform: none|transform-functions; 

用法

值	描述	测试
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。	matrix.html
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D位移转换。	translate.html
translate3d(x,y,z)	定义 3D位移转换。
translateX(x)	定义位移转换，只是用 X 轴的值。
translateY(y)	定义位移转换，只是用 Y 轴的值。
translateZ(z)	定义 3D位移转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。	scale.html
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度，不过必须要有单位，比如deg(度), turn(圈), grad(百分度 – 一种角的测量单位，定义为一个圆周角的1/400。常用于建筑或土木工程的角度测量)，甚至可以使用calc()计算，例如：calc(.25turn - 30deg)。	rotate.html
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。	skew.html
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)？	为 3D 转换元素定义透视视图。

transform-origin

transform旋转默认是绕着中心点旋转的，而这个中心点就是transform-origin属性对应的点。该属性必须与 transform属性一同使用。
Internet Explorer 10、Firefox、Opera 支持 transform-origin 属性。
Internet Explorer 9 支持替代的 -ms-transform-origin 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform-origin 属性（3D 和 2D 转换）。Opera 只支持 2D 转换。
语法为：

transform-origin: x-axis y-axis z-axis;

值	描述
x-axis	定义视图被置于 X 轴的何处。可能的值：left、center、right、length、%
y-axis	定义视图被置于 Y 轴的何处。可能的值：top、center、bottom、length、%
z-axis	定义视图被置于 Z 轴的何处。可能的值：length

参考实例：transform-origin.html

transform-stype

规定如何在 3D 空间中呈现被嵌套的元素。该属性必须与 transform属性一同使用。
Firefox 支持 transform-style 属性。Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 属性。
语法为：

transform-style: flat|preserve-3d;

值	描述
flat	子元素将不保留其 3D 位置。
preserve-3d	子元素将保留其 3D 位置。

text-transform

还有一个带transform属性的就是text-transform，这个和transform本事没有太大关系，它是控制文本的大小写的。里面有以下属性：

值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承 text-transform 属性的值。

transform一般会和transition、animation一起使用，这里有这三个属性的对比：transition,transform,animation对比