CSS 3D
2013-05-04
CSS 3D
没有坐标系就没有一切，牢记下面的图吧！
3D视图
-webkit-transform-style: preserve-3d;就可以设定一个3D场景了，不过想要实现效果还需要设定下面参数
perspective 透视
简 单的说就是3D场景展现在屏幕上时是以那个位置查看的结果（远近而不是距离）。比如你要建立一个小立方体，长宽高都是40px。如果你的 perspective < 40 ，那就相当于站在盒子里面看的结果，如果perspective 非常大那就是站在非常远的地方看（立方体已经成了小正方形了）
(粉红色是页面背景 -webkit-perspective: 90;-webkit-perspective-origin: 50% 40px;)
同时还需要有个透视位置perspective-origin ，这个默认是center center 。还是说小立方体，如果你站在中心线的位置看，会看到左右对称；如果站在高于顶部的位置看，就会看到其他立体效果。（注意，高于顶部等于Y减小）
（-webkit-perspective: 90;-webkit-perspective-origin: 50% -60px; 立方体长宽均为40px；注意是视角不同，而没有对立方体进行旋转）
要注意perspective只对子代有效。
3D场景有了就可以将平面上的div移动到面前面或后面了。