投影

把三維物體變?yōu)槎S圖形表示的過程稱為投影變換。

根據(jù)投影中心與投影平面之間距離的不同，投影可分為 「平行投影」 和 「透視投影」。平行投影的投影中心與投影之間的距離為無窮大，如左圖;而對透視投影，這距離是有限的，如右圖。

在 CSS 中，使用 transform3d 變換后的圖形也就有了投影的概念。

平行投影

平行投影包括斜平行投影和正平行投影

開啟transform3d后，在未開啟透視的情況下，所有html元素默認處于translateZ=0的狀態(tài)，即屬于正平行投影

透視投影

一點透視

• 視平線
• 一個消失點

兩點透視

• 視平線
• 兩個消失點

三點透視

• 視平線
• 三個消失點

在css中，只有一點透視的概念。消失點就是 perspective-origin。

平行投影和透視投影

無數(shù)條投影線組成投影空間

透視投影的投影空間用四棱錐表示

平行投影的投影空間用四棱柱表示

最終投影得出的畫面由棱柱/棱錐的每個截面(縮放到同一大小后)合成，所以透視投影就會出現(xiàn)近大遠小，而平行投影反映了物體之間的絕對大小

css透視

perspective

css透視需要關注幾個點

如圖所示，

• 投影中心：眼睛
• 投影面：drawing surface

• 即屏幕最終顯示的效果
• 投影面的translateZ=0

• 物體：

• 虛線的圓代表物體實際的大小
• 圖1代表物體translateZ>0的情況
• 圖2代表物體translateZ<0的情況
• 實線的圓代表平行投影后的大小
• 同時也代表在透視投影中，物體translateZ=0的情況
• 藍色的圓代表透視投影后的大小

• 投影中心到投影面的距離：d

• 即perspective的值
• 如果物體translateZ>=d，那么將不會出現(xiàn)在投影面中

• 物體到投影面的距離：z

• 即translateZ的值

perspective-origin

perspective-origin即一點透視中的消失點，可以把每個正方體理解為不同origin時展示的畫面

讀者可通過在線示例了解更多細節(jié)：https://codepen.io/dkplus/pen/powJYgm