整 理：徐秀、晋哲
时 间：2015-12-04
说 明：CSS3 Transform基本语法以及基础用法的介绍。
一、名词解释
transform字面上就是变形，改变的意思，包括2D transform和3D transform。在CSS3中transform主要包括以下几种：移动translate()、旋转rotate()、扭曲skew()、缩放scale()以及矩阵变形matrix()，对内联元素(inline)和块级元素(block)都适用。
二、浏览器兼容性
注意：transform是CSS3新属性，目前兼容浏览器【盗图】：
和其它CSS3新属性一样，transform要加兼容前缀。
三、transform-origin属性
transform-origin在元素发生transform变换时有效，是发生变换的基点，以此点建立【2d/3d】坐标。默认值为：transform-origin:50% 50% [0]; 第三个参数是3d转换下z的值，默认0。当改变transform-origin的值时，transform参照基点发生改变，如: transform-origin:0 0;
其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom。
四、语法讲解
| 值 |
描述 |
| none |
定义不进行转换。 |
| matrix(n,n,n,n,n,n) |
定义 2D 转换，使用六个值的矩阵。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate(x,y) |
定义 2D 转换。 |
| translate3d(x,y,z) |
定义 3D 转换。 |
| translateX(x) |
定义转换，只是用 X 轴的值。 |
| translateY(y) |
定义转换，只是用 Y 轴的值。 |
| translateZ(z) |
定义 3D 转换，只是用 Z 轴的值。 |
| scale(x,y) |
定义 2D 缩放转换。 |
| scale3d(x,y,z) |
定义 3D 缩放转换。 |
| scaleX(x) |
通过设置 X 轴的值来定义缩放转换。 |
| scaleY(y) |
通过设置 Y 轴的值来定义缩放转换。 |
| scaleZ(z) |
通过设置 Z 轴的值来定义 3D 缩放转换。 |
| rotate(angle) |
定义 2D 旋转，在参数中规定角度。 |
| 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 倾斜转换。 |
| skewX(angle) |
定义沿着 X 轴的 2D 倾斜转换。 |
| skewY(angle) |
定义沿着 Y 轴的 2D 倾斜转换。 |
| perspective(n) |
为 3D 转换元素定义透视视图。 |
未经transform转换的div，以下各种变换均以此为参照：
通过指定translation(tx,ty)进行矢量偏移，translation3d(tx,ty,tz);参数tx 是x轴方向的偏移矢量，ty 可选参数是y轴方向的偏移矢量。translation3d()中的各值，表示在对应方向的偏移量。tx,ty,tz的取值可以是具体的像素值，也可以是百分比，百分比的的取值相对于自身的宽高。translate(),表示对对象进行平移，当值为负数时，反方向移动物体。分别指定指定轴上的偏移量可以。通过transform-origin属性改变基点。
其它写法：translateX(x)【适用于2d/3d】，translateY(y) 【适用于2d/3d】；translateZ(z) 【适用于3d】，
代码：
效果：
通过指定的角度参数对指定元素指定一个rotate(angle)进行2d旋转，rotate3d(rx,ry,rz,angle)进行3d旋转；rx,ry,rz可以取【1：正方向；-1：反方向；0不旋转】；在指定方向选择angle度； angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。可以通过transform-origin属性改变基点。
其它写法：rotateX(angle) 【适用于3d】；rotateY(angle) 【适用于3d】；rotateZ(angle) 【适用于3d】
代码:
效果：
通过指定scale(sx,sy)的sx、sy参数对指定元素进行2d缩放； scale3d(sx,sy,sz)进行3d缩放。2d缩放的第二个参数可选，未提供，则取与第一个参数一样的值；3d的三个参数都必写，表示在对应方向的缩放比例。可以通过transform-origin对元素的基点进行设置。
其它写法：scaleX(x)【适用于2d/3d】，scaleY(y) 【适用于2d/3d】；scaleZ(z) 【适用于3d】。
代码：
效果：
通过指定skew(x-angle, y-angle)的x-angle、 y-angle参数对指定元素在指定方向上发生倾斜； skew()没有3d写法；x-angle是水平方向扭曲角度，y-angle可选，是垂直方向扭曲角度。如未设置y-angle，那么Y轴倾斜角度为0deg。
其它写法：skewX(x)【适用于2d】，skewY(y) 【适用于2d】。
代码：
效果：
matrix():2d矩阵包含6个值matrix(a,b,c,d,e,f);3d矩阵包含16个之matrix(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p)4*4个值，以上的各种变换(2d/3d),都可以矩阵计算得到相应效果，单计算过程很复杂，此处就不赘述了。有兴趣的小伙伴可以自行学习下。
