读懂 CSS 投影与透视

投影

把三维物体变为二维图形表示的读懂过程称为投影变换。

根据投影中心与投影平面之间距离的影透不同，投影可分为 「平行投影」 和 「透视投影」。读懂平行投影的影透投影中心与投影之间的距离为无穷大，如左图;而对透视投影，读懂这距离是影透有限的，如右图。读懂

在 CSS 中，影透使用 transform3d 变换后的读懂图形也就有了投影的概念。

平行投影

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

开启transform3d后，影透在未开启透视的服务器托管读懂情况下，所有html元素默认处于translateZ=0的影透状态，即属于正平行投影

透视投影

一点透视视平线一个消失点

两点透视视平线两个消失点

三点透视视平线三个消失点

在css中，读懂只有一点透视的影透概念。消失点就是读懂 perspective-origin。

平行投影和透视投影

无数条投影线组成投影空间

透视投影的投影空间用四棱锥表示

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

最终投影得出的画面由棱柱/棱锥的每个截面(缩放到同一大小后)合成，所以透视投影就会出现近大远小，而平行投影反映了物体之间的绝对大小

css透视

perspective

css透视需要关注几个点

如图所示，

投影中心：眼睛投影面：drawing surface即屏幕最终显示的效果投影面的云服务器translateZ=0物体：虚线的圆代表物体实际的大小图1代表物体translateZ>0的情况图2代表物体translateZ<0的情况实线的圆代表平行投影后的大小同时也代表在透视投影中，物体translateZ=0的情况蓝色的圆代表透视投影后的大小投影中心到投影面的距离：d即perspective的值如果物体translateZ>=d，那么将不会出现在投影面中物体到投影面的距离：z即translateZ的值

perspective-origin

perspective-origin即一点透视中的消失点，可以把每个正方体理解为不同origin时展示的站群服务器画面

读者可通过在线示例了解更多细节：https://codepen.io/dkplus/pen/powJYgm