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.