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