CSS3 3D transform变换 视差滚动效果学习

CSS3 3D transform变换 视差滚动效果学习

在学习css如何做到视差滚动效果时，阅读了张鑫旭老师的文章，记录下学习视差滚动 and 3D transform变换的几个理解点。

1.复习笛卡尔坐标系的概念，下面这张图的Y方向应该标反了，关于笛卡尔坐标系的知识可以维基下Cartesian coordinates，复习下笛卡尔坐标系的方向判断后，rotateX,Y,Z理解起来就非常轻松了。

---

2.在之后是关于perspective这个属性的内容，原文下面的图开始有些难以理解，两种书写方式为什么会造成这样的差异，这里可以这样理解：

• 如果你只给stage设置了perspective属性，相当于就只有一个观看者，而perspective-origin是初始视觉点，默认为(50%，50%),即在这个观看平面的中央。所以当只有一个观看者，面对n扇y轴倾斜45°的门，可以自己模拟测试下，每扇门的可视面积是不一样的。也会存在某一扇门与你转头看过去的视线角度是平行的，从而“消失”了。
• 而给子元素也设置了perspective属性后，相当于每一扇门前都有一个你，所以每扇门的可视面积是一样的。

---

3.视差滚动中scale的计算，画一个草图即可得知，perspective是舞台视觉平面抬起（向你而来）的距离，而translateZ是元素后退的距离（离你而去），所以scale = |translateZ|/perspective.