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
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
