css3 3D transform
transform是css3新增的功能，可以用来改变元素的形状和位置，分为2D和3D两种，实际上2D变换可以看做是3D变换的一种特殊形式。
原理
可以联想到计算机图形中的摄像机与物体的空间关系，以及透视投影原理，就能理解3D transform的基本原理了。
3D坐标系
在浏览器中，一般二维坐标系的原点为左上角，而三维坐标系z轴的方向是由屏幕向外增大的，除此之外x轴和y轴的方向与二维坐标系无异。所以屏幕所在平面就相当于z=0平面。
perspective属性
perspective属性的值相当于视点（应该是投影平面）离屏幕（z=0平面）的距离，距离越远则成像的效果越接近于平行投影，也就是越没有立体效果，反之则更具有立体效果；需要注意的是该属性作用于其子元素，因此常放置在容器元素中！
一般要体现出立体效果，还需要结合translateZ来对元素的z坐标进行控制；
perspective-origin属性
perspective-origin属性表示视点在成像平面（即屏幕）所在的位置，默认为center center，即平面的正中心位置。参数值选项与transform-origin一样，只不过没有z轴的参数（？）。
transform-style属性
通过设置transform-style的属性，可以控制其子元素的呈现方式，也就是投影方式。当属性为flat（默认值）时，其子元素为2D呈现，即平行投影；当属性为preserve-3d时，为3D呈现，即透视投影。由于其作用在其子元素上，所以一般用来当做立体容器来使用。
transform-origin
顾名思义，transform-origin属性就是用来设置元素的坐标原点位置，而transform的变换需要依靠坐标原点。其默认值为center center，即元素的正中心；而在三维变换中，还有另一个transform-origin-z属性用来设置原点的z轴坐标，其默认值为0，即屏幕平面；transform-origin-z属性目前只有谷歌浏览器支持，所以需要加-webkit-前缀。不过，transform-origin是可以接受第三个参数的，其默认值也是0！
参数值：
| 值 | 描述 |
|---|---|
| x-axis | 定义视图被置于 X 轴的何处。可能的值： left center right length % |
| y-axis | 定义视图被置于 Y 轴的何处。可能的值： top center bottom length % |
| z-axis | 定义视图被置于 Z 轴的何处。可能的值： length |
backface-visibility属性
backface-visibility属性决定元素旋转后背面是否可见，默认值为visible（可见），设置为hidden后背面不可见。
基本变换类型
其实学过计算机图形就差不多知道，在三维空间中，物体自身的所有变换都可以通过一个4x4的变换矩阵来表示：
二维的变换可以用一个3x3矩阵来表示：
计算方式就是将变换矩阵与元素的二维或三维坐标进行相乘，就能得到变换后的新坐标：
所有的变换都是以transform-origin属性值作为坐标原点，然后计算的。
translate
即平移，平移就是相对于目前位置发生偏移；有translate()，translateX()，translateY()，translateZ()，translate3d()这几种可供选择。
rotate
即旋转，依照旋转轴（如X轴）对元素进行旋转；变换函数名字与上面类似。
scale
即缩放，相对于目前的坐标对点的坐标进行相应的放大或缩小；变换函数与上面类似。
skew
即错切，通过在X轴方向（水平方向）上平移x坐标或在Y轴方向（垂直方向）上平移y坐标形成倾斜；只有二维的变换函数skew()，skewX()和skewY()；
matrix
定义变换矩阵，分为matrix()（即二维的，3x3矩阵）和matrix3d()（即三维的，4x4矩阵）。可以说矩阵变换是上述所有变换的基础，即上述所有变换都可以通过矩阵变换实现！