CSS3 3D – 建立一个3D场景perspective perspective-origin

CSS3 3D – 建立一个3D场景

从昨天晚上开始看CSS3D，有个想法之前想用webGL来实现，后来发现CSS3也如此强大，而且不卡，就转投CSS了。。。

现在有抱着电脑从侧面看的冲动了。。。吧一些自己的理解记下来，写的不对的还请大家指正，谢谢。

坐标系

没有坐标系就没有一切，牢记下面的图吧！

来源：http://goo.gl/81KLr

关键术语

css比webgl简单就在于定义几个样式3d效果就出来了（不过这也导致不够灵活）。详细定义在http://www.w3.org/TR/css3-3d-transforms/ 这里只找简单的说说。

注意，以下的名称各个浏览器不一样，webkit的内核请加前缀-webkit- ，如transform，在使用时要定义成-webkit-transform；firefox前缀是-moz-;

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移动到面前面或后面了。这个以后再说～

http://my.neverbest.com/enjoyhtml5/example/3dSense.html 提供一个演示，显示一个3D立方体，只支持webkit内核浏览器。

更多资料

写blog总是语无伦次，把我学习时用到了的资料贴上吧，还是不太好找的。。

CSS 3D Transforms Module http://www.w3.org/TR/css3-3d-transforms/

Safari CSS Visual Effects Guide – Transforms http://goo.gl/aCKOB

Webkit.org 3D Transforms http://goo.gl/uQe60

safaridemos http://goo.gl/ISDjt