首页 > 代码库 > CSS 3D transform(CSS的3D变换)

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