CSS3变形之3D变形
三维变换使用基于二维变换的相同属性，3D变形的功能和2D变换的功能相当类似。CSS3中的3D变换主要包括以下几种功能函数：
3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；
3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；
3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；
3D矩阵：CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。
CSS3 3D位移
在CSS3中3D位移主要包括两种函数translate3d()和translateZ()。translate3d()函数使一个元素在三维空间移动。这种变形的特点是，使用三维向量的坐标定义元素在每个方向移动多少。其基本语法如下：
translate3d(tx,ty,tz)其属性值取值说明如下：
tx：代表横向坐标位移向量的长度；
ty：代表纵向坐标位移向量的长度；
tz：代表Z轴位移向量的长度。此值不能是一个百分比值，如果取值为百分比值，将会认为无效值。
-
translateZ()函数的功能是让元素在3D空间沿Z轴进行位移，其基本使用语法如下：
translateZ(t)取值说明如下：
- t：指的是Z轴的向量位移长度。
使用translateZ()函数可以让元素在Z轴进行位移，当其值为负值时，元素在Z轴越移越远，导致元素变得较小。反之，当其值为正值时，元素在Z轴越移越近，导致元素变得较大。
translateZ()函数仅让元素在Z轴进行位移，当其值越大时，元素离观看者越近，视觉上元素放大，反之元素缩小。
translateZ()函数在实际使用中等同于translate3d(0,0,tz)。仅从视觉效果上看，translateZ()和translate3d(0,0,tz)函数功能非常类似于二维空间的scale()缩放函数，但实际上完全不同。translateZ()和translate3d(0,0,tz)变形是发生在Z轴上，而不是X轴和Y轴。当使用3D变形，能够在一Z轴上移动一个元素确实有很大的好处，比如说在创建一个3D立方体的盒子之时。
CSS3 3D缩放
CSS3 3D变形中的缩放主要有scale3d()和scaleZ()两种函数，当scale3d()中X轴和Y轴同时为1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。通过使用3D缩放函数，可以让元素在Z轴上按比例缩放。默认值为１，当值大于１时，元素放大，反之小于１大于0.01时，元素缩小。其使用语法如下：
scale3d(sx,sy,sz)其取值说明如下：
- sx：横向缩放比例；
- sy：纵向缩放比例；
- sz：Z轴缩放比例；
scaleZ(s)其取值说明如下：
- s：指定元素每个点在Z轴的比例。
scaleZ(-1)定义了一个原点在Z轴的对称点（按照元素的变换原点）。
scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果。下面我们来看一个实例，为了能看到scaleZ()函数的效果，我们添加了一个rotateX(45deg)功能：
.s1 img:nth-child(2){
z-index: 2;
-webkit-transform: scaleZ(5) rotateX(45deg);
-moz-transform: scaleZ(5) rotateX(45deg);
-ms-transform: scaleZ(5) rotateX(45deg);
-o-transform: scaleZ(5) rotateX(45deg);
transform: scaleZ(5) rotateX(45deg);
}
.s2 img:nth-child(2){
z-index: 2;
-webkit-transform: scaleZ(.25) rotateX(45deg);
-moz-transform: scaleZ(.25) rotateX(45deg);
-ms-transform: scaleZ(.25) rotateX(45deg);
-o-transform: scaleZ(.25) rotateX(45deg);
transform: scaleZ(.25) rotateX(45deg);
}其效果如下所示：
CSS3 3D旋转
在三维变形中，我们可以让元素在任何轴旋转。为此，CSS3新增三个旋转函数：rotateX()、rotateY()和rotateZ()。
使用rotateX()函数允许一个元素围绕X轴旋转；rotateY()函数允许一个元素围绕Y轴旋转；rotateZ()函数允许一个元素围绕Z轴旋转。
rotateX()函数指定一个元素围绕X轴旋转，旋转的量被定义为指定的角度；如果值为正值，元素围绕X轴顺时针旋转；反之，如果值为负值，元素围绕X轴逆时针旋转。其基本语法如下：
rotateX(a) //其中a指的是一个旋转角度值，其值可以是正值也可以是负值。rotateY()函数指定一个元素围绕Y轴旋转，旋转的量被定义为指定的角度；如果值为正值，元素围绕Y轴顺时针旋转；反之，如果值为负值，元素围绕Y轴逆时针旋转。其基本语法如下：
rotateY(a) //其中a指的是一个旋转角度值，其值可以是正值也可以是负值。rotateZ()函数和其他两个函数功能一样的，区别在于rotateZ()函数指定一个元素围绕Z轴旋转。其基本语法如下：
rotateZ(a)rotateZ()函数指定元素围绕Z轴旋转，如果仅从视觉角度上看，rotateZ()函数让元素顺时针或逆时针旋转，并且效果和rotate()效果等同，但他不是在2D平面的旋转。
在三维空间里，除了rotateX()、rotateY()和rotateZ()函数可以让一个元素在三维空间中旋转之外，还有一个属性rotate3d()函数。在3D空间，旋转有三个程度的自由来描述一个转动轴。轴的旋转是由一个[x,y,z]向量并经过元素原点。其基本语法如下：
rotate3d(x,y,z,a)rotate3d()中取值说明：
- x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
- y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
- z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
- a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
三个旋转函数功能等同：
- rotateX(a)函数功能等同于rotate3d(1,0,0,a)
- rotateY(a)函数功能等同于rotate3d(0,1,0,a)
- rotateZ(a)函数功能等同于rotate3d(0,0,1,a)
CSS3 3D矩阵
CSS3中的3D矩阵要比2D中的矩阵复杂，从二维到三维，矩阵里头从3*3变成4*4。不过，本质上很多东西都与2D是一致的，只是复杂程度不一样而已。
3D矩阵即为透视投影
代码表示就是：
matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)推算方法与2D矩阵均是类似的。
CSS3 3D倾斜
倾斜是二维变形，不能在三维空间变形。元素可能会在X轴和Y轴倾斜，然后转化为三维，但它们不能在Z轴倾斜。
CSS3 3D变形兼容性
3D变形在实际使用时同样需要添加各浏览器的私有属性，并且有个别属性在某些主流浏览器中并未得到很好的支持：
- IE10+中3D变形部分属性未得到很好的支持；
- Firefox10.0至Firefox15.0版本的浏览器，在使用3D变形时需要添加私有属性-moz-，但从Firefox16.0+版本开始无需添加浏览器私有属性；
- Chrome12.0+版本中使用3D变形时需要添加私有属性-webkit-；
- Safari4.0+版本中使用3D变形时需要添加私有属性-webkit-；
- Opera15.0+版本才开始支持3D变形，使用之里需要添加私有属性-webkit-；
- 移动设备中iOS Safari3.2+、Android Browser3.0+、Blackberry Browser7.0+、Opera
Mobile14.0+、Chrome for
Android25.0+都支持3D变形，但在使用时需要添加私有属性-webkit-；Firefox for
Android19.0+支持3D变形，但无需添加浏览器私有属性。
多重变形
在CSS3中，不管是2D变形还是3D变形，我们都可以使用多重变形，他们之间使用空格分隔，具体的语法如下：
transform: <transform-function> <transform-function> *其中transfrom-function是指CSS3中的任何变形函数。
参考：
http://www.w3cplus.com/css3/css3-3d-transform.html