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

标签：style   http   os   io   for   cti   

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

CSS 3D transform（CSS的3D变换）,布布扣,bubuko.com

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

标签：style   http   os   io   for   cti   

原文地址：http://www.cnblogs.com/figure79/p/3854309.html