投影

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

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

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

平行投影

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

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

透視投影

一點(diǎn)透視

• 視平線
• 一個(gè)消失點(diǎn)

兩點(diǎn)透視

• 視平線
• 兩個(gè)消失點(diǎn)

三點(diǎn)透視

• 視平線
• 三個(gè)消失點(diǎn)

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

平行投影和透視投影

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

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

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

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

css透視

perspective

css透視需要關(guān)注幾個(gè)點(diǎn)

如圖所示，

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

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

• 物體：

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

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

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

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

• 即translateZ的值

perspective-origin

perspective-origin即一點(diǎn)透視中的消失點(diǎn)，可以把每個(gè)正方體理解為不同origin時(shí)展示的畫面

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