css实现3D动画效果
首先css3中能实现动画的功能的主要有transition(一个属性值平滑的过渡到另一个属性值)和animation(通过关键帧的技术在网页上产生更加复杂的效果)两种属性。
在想产生动画效果的元素内添加相应的样式，这个样式的格式如下：
transition:<过渡属性名称><过度时间><过渡的模式>
过渡的模式就有以下这么几种：
ease 缓慢开始，缓慢结束，中间速度会快些。(如果不定义过渡的模式这个就是默认的模式)
linear 匀速
ease-in 缓慢开始
ease-out 缓慢结束
ease-in-out 缓慢开始，缓慢结束
因为transition最早是有由webkit内核浏览器提出来的，mozilla和opera都是最近版本才支持这个属性，而我们的大众型浏览器IE全家都是不支持，另外由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法，所以在应用transition时我们有必要加上各自的前缀，以下的例子就以谷歌里用的-webkit-transition为例。
例：-webkit-transition:color 1s linear;
也可以这么分开写：
过渡的属性赋值给：-webkit-transition-property:color;
过渡的时间赋值给：-webkit-transition-duration:1s;
过渡的模式赋值给：-webkit-transition-timing-function:linear;
当你想对多个属性都用到动画效果的时候，就可以这么写：
-webkit-transition:<属性1><时间1>,<属性2><时间2>,...
或者分成两条语句：-webkit-transition:<属性1><时间1>；
-webkit-transition:<属性2><时间2>；
自己先来尝试的做一下简单的动画：
以下代码感受一下五种不同过渡模式的区别：
linear(匀速)
ease(缓慢开始，缓慢结束,中间速度会快些）
ease-in(缓慢开始)
ease-out(缓慢结束)
ease-in-out(缓慢开始，缓慢结束)
简单的动画效果会了之后，但由于浏览器是一个平面，所以我们要开始搭建一个3D场景。
就相当于透过浏览器这个窗口来观察三维世界。为此我们要引入以下两个属性：
-webkit-perspective:800; (浏览器将会距离我们观察的三维物体有800个像素那么远)
-webkit-perspective-origin:50% 50%（还存在一个观察视点的问题，相当于一个x轴，一个y轴，50% 50%就相当于我们从整个浏览器的正中央进行观察这个三维世界）
三维世界的z轴的正方向，就是从屏幕冲向我们的这个方向，以一个正方形为例左上顶点就是原点，向下是y轴向右是x轴。
经过设置之后此时浏览器中的物体已经变成三维的了。但是如果不进行任何设置的话，那就跟二维的看起来是一样的，
所以我们要引入一个新的属性 transform 来对这些元素进行调整，来展现出他们的三维效果。
有两种transform的方式对三维空间的物体进行操作
translate:平移操作（位移操作）单位是像素
translateX(x px)
translateY(y px)
translateZ(z px)
rotate:旋转操作 单位是角度
rotateX(x deg)
rotateY(y deg)
rotateZ(z deg)
由于transform属性同样适用与2D，所以我们要告诉浏览器，我们现在用的这个transform去调整元素是在三维空间里作调整的话
我们还要写一句：-webkit-transform-style:-webkit-preserve-3d;
例：如果想对一个div块元素的transform属性调整，使其对观察者而言，右边沿向屏幕内旋转45度相应的CSS属性应该如何设置？
旋转中心是可以改变的：
对于x轴可以赋予left center right三个值
对于y轴可以赋予top center bottom这三个值
对于z轴可以赋予length px(作为一个长度值)
一个3D的小例子：
1
2
3
4
5
6