CSS3 3D效果
这里单独写一篇关于CSS3 3D动画的博文，和大家分享我对3D动画的认识
笛卡尔坐标系统
在说3D变换之前必须了解的一个坐标系统，浏览器对元素进行3D定位、渲染就是遵循这个笛卡尔坐标系统。
2D笛卡尔坐标系统
2D转换是沿着两个坐标轴定义，如下所示
值的注意的是，y轴是向下延伸，这是由于系统采用的是二维笛卡尔坐标系统。
坐标系统的X轴会沿着所要转换的元素节点向水平维度延伸，y轴则沿着垂直维度延伸。
此坐标系统的原点（图标中的“（0,0）”）默认位于所要转换的元素的中心。可通过transform-origin属性改变。
而本文重点介绍的3D transform在2D的基础上增加多一个维度。
3D笛卡尔坐标系统
坐标系统的Z轴同时与x和y轴垂直。
此坐标系统的原点（图表中的“（0,0,0）”）也默认位于所要转换的元素的中心。同样可通过transform-origin属性改变。
3D转换从IE10开始得到支持。
要实现3D效果，要使用如下css属性：
1.perspective
perspective是指景深，定一个长度值，这个值代表从这个透视长度检视物件的所有子元素。通俗点讲就是：我们离元素多远来观察这个3D视图，如下图所示：
一般而言，该声明应用在3D变换的兄弟元素们的父元素上。
2.perspective-origin(x,y)
perspective-origin是指景深基点，主要用来决定perspective属性的源点角度。perspective-origin属性必须定义在父元素上。通常perspective-orgin属性本身不做任何事情，它必须被定义在设置了perspective属性的元素上。换句话说，perspective-origin属性需要与perspective属性结合起来使用，以便将视点移至元素的中心以外位置。默认点是元素的中心点。其中X和Y的值可以是百分值、em、px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom这个看上去有点像我们background-position一样；下面给出一张图片方便大家理解：
上图中红点就相当于观察者的眼睛，我们在红点处观察3D元素，下面列出相应的写法：
top left、left top 等价于0 0、0% 0%
top、top center、center top 等价于50% 0
right top、top right 等价于100% 0
left、left center、center left 等价于0 50%、0% 50%
center、center center 等价于50% 50%（默认值）
right、right center、center right等价于100% 50%
bottom left、left bottom 等价于0 100%、0% 100%
bottom、bottom center、center bottom等价于50% 100%
bottom right、right bottom 等价于100% 100%
其中left,center,right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%;而top,center,bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取一个值，表示垂直方向值不变。
3.transform-style
transform-style 用于规定如何在3D空间中呈现被嵌套的元素，通俗来讲就是建立3D空间。一般而言，该声明应用在3D变换的兄弟元素们的父元素上。
transform-style:flat|preserve-3d;
flat:子元素将不保留其3D位置。（默认值）
preserve-3d:子元素将保留其3D位置。
4.transform
相对于2D变换，3D变换在原有的transform属性中添加了一下属性：
4.1 3D位移-translate3d(tx,ty,tz)
在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。translate3d()函数使一个元素在三维空间移动。这种变形的特点是，使用三维向量的坐标定义元素在每个方向移动多少。其中
tx:代表x坐标位移向量的长度
ty:代表y坐标位移向量的长度
tz:代表z轴位移向量的长度。此值不能是一个百分比值，如果取值为百分比值，将会认为无效值。
衍生3个属性分别为：
translateX(tx):x轴位移向量的长度，相当于translate3d(tx,0,0)
translateY(ty):y轴位移向量的长度，相当于translate3d(0,ty,0)
translateZ(tz):z轴位移向量的长度，相当于translate3d(0,0,tz)
示例如下
4.2 3D旋转-rotate3d(x,y,z,angle)
rotate3d代表在3D空间，元素沿着经过原点（0,0,0）和三维坐标（x,y,z）2点的直线进行旋转。其中：
x:是一个0到1之间的数值，主要用来描述元素围绕X轴旋转的矢量值
y:是一个0到1之间的数值，主要用来描述元素围绕Y轴旋转的矢量值
z:是一个0到1之间的数值，主要用来描述元素围绕Z轴旋转的矢量值
angle:是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
衍生3个属性分别为：
rotateX(angle):指定沿着X轴根据指定角度的顺时针方向旋转。相当于rotate(1,0,0,angle);
rotateY(angle):指定沿着Y轴根据指定角度的顺时针方向旋转。相当于rotate(0,1,0,angle);
rotateZ(angle):指定沿着Z轴根据指定角度的顺时针方向旋转。相当于rotate(0,0,1,angle);
示例如下：
4.3 3D缩放-scale3d(sx,sy,sz)
CSS3 3D变形中的缩放主要有scaleZ()和scale3d()两种函数，当scale3d()中X轴和Y轴同时为1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。使用3D缩放函数，可以让元素在Z轴上按比例缩放。默认值为1，当值大于1时，元素放大，反之小于1大于0.01时，元素缩小。
其取值说明如下：
sx:横向缩放比例
sy:纵向缩放比例
sz:z轴缩放比例
衍生3个属性分别为：
scaleX(sx):指定元素每个点在X轴的比例。相当于scale3d(sx,1,1);
scaleY(sy):指定元素每个点在Y轴的比例。相当于scale3d(1,sy,1);
scaleZ(sz):指定元素每个点在Z轴的比例。相当于scale3d(1,1,sz);
示例如下：
应用
下面我们绘制一个正方体
css代码如下
html代码
显示效果如下：
注意：transform属性中rotate和translate的顺序是很重要的，比如.top中我们先沿X轴旋转90度，此时该div的Z轴已经不是垂直屏幕指向读者，而是竖直向上了。大家可能需要一些时间研究这些代码，要从立体的角度想象rotate之后Z轴的指向。每一个面开始时都按自己的中心点旋转，旋转之后X、Y、Z轴的指向也发生了变化。