CSS 3D transform（CSS的3D变换）

src1：好吧，CSS3 3D transform变换，不过如此！

评价：图文并茂地解释 CSS 3D transform 的基本概念及原理，超级通俗易懂，读后简直醍醐灌顶啊！！！幽默的程序员

笔记：

一、4个概念

1、突破口：三个方法
　  3D transform 中的三个方法：
　　（1）rotateX(angle)：正面推倒
　　（2）rotateY(angle)：左右转
　　（3）rotateZ(angle)：横抱躺着

2、必不可少的perspective（透视、视角）
　　没透视，不3D
　　CSS 3D transform 透视点在浏览器的前方（即我们眼睛处）

3、translateZ 帮你寻找透视位置
　　即让元素离自己的远近

4、transform-style
　　两个属性值：
　　（1）flat：表示平面的
　　（2）preserve-3d：表示3D透视的

　　一般而言，舞台元素 transform-style: preserve-3d 

二、理解3个属性

1、关于perspective
　　perspecitve属性的两种书写（不同表现见博客“六”）
　　（1）对舞台元素（动画元素们的共同父辈元素）
　　（2）对当前动画元素，与transform的其他属性一起

2、perspective-orign
　　即为眼睛看的中心点

3、backface-visibility
　　在CSS3的3D世界中，默认情况下，我们可以看到背后的元素
　　为了切合实际，我们常常让后面的元素不可见，即 backface-visibility: hidden;

三、原理3层

eg.图片的旋转木马

　　1 舞台 （加个视距，perspective: 800px）
　　　　1.1 容器（加个3D视图声明，transform-style: preserve-3d）
　　　　　　1.1.1 图片
　　　　　　1.1.2 图片
　　　　　　1.1.3 图片（为了不至于产生类似DNA的螺旋状效果-让position=absolute 公用同一个中心点）

 

参考：
【1】好吧，CSS3 3D transform变换，不过如此！http://www.zhangxinxu.com/wordpress/?p=2592