基于css的3d和动画

demo地址：http://www.adanghome.com/js_demo/42/

======================================================

不得不再次感叹下css3的强大！动画、3d居然全都用描述性语言css给描述出来了。。。一行js也不用写。

一些3d相关的概念，之前在看css3的3d api设计时，看不太明白。这几天试玩了下three.js，了解了3d图形学的一些基本概念，然后就豁然开朗了。

另外，再感叹下css3的动画处理，无论逐帧动画，还是补间动画，顺序播放、逆序播放、交叉播放，播放次数，播放延迟，还是播放加速度，什么都可以简单地通过描述给描述出来。想起flash的ide、想起js写的动画组件。。。

再次膜拜下css的属性设计者们，你们真的是天才。

需要注意的是：

1）css的语法其实底层是矩阵变化，不同的元素可以设置不同的景深！这和threejs那种全局只能设置一个摄像头完全不同。也就是说，如果需要的话，每个元素的3d效果都可以单独设置，并不需要全局共用同一个影深。而css的这些语法不过是让使用者们更容易理想，相当于为开发者们封了一个3d矩阵变化的css语法糖。

2）默认情况下，影深的观察点是元素的中心位置，如果元素没有设置固定宽高，那么动态为父容器添加一个子元素，为让父容器的宽高产生变化，也就影响了之前元素的3d效果。所以可以为父元素设置一个固定宽高，或者将观察点设为左、上。

3）父容器设置了景深，子元素也设置了景深，两者会效果叠加，而不是覆盖。