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.