Projection将三维物体变为二维图形表示的过程称为投影变换。根据投影中心与投影平面的距离,投影可分为“平行投影”和“透视投影”。平行投影的投影中心到投影的距离是无限远的,如左图;而对于透视投影,这个距离是有限的,如右图所示。在CSS中,transform3d变换后的图形也有投影的概念。平行投影平行投影包括斜平行投影和正平行投影开启transform3d后,如果不开启透视,所有html元素默认都处于translateZ=0的状态,即属于正平行投影透视投影.点透视眼睛水平面两个消失点三点透视眼睛水平面三个消失点在css中只有一个点透视的概念。消失点是透视原点。平行投影和透视投影无数的投影线构成了投影空间。透视投影的投影空间用四棱锥表示。平行投影的投影空间用四棱柱表示。最终投影出来的图片由棱镜/金字塔的各个部分(缩放到相同尺寸后)合成,所以透视投影会出现近大远小,而平行投影则体现了物体之间的绝对大小cssperspectiveperspectivecssperspectivecssperspective要注意图中几个点,投影中心:眼睛投影面:绘图面就是屏幕最终显示的效果投影面translateZ=0object:虚线圆代表物体的实际大小图1表示的情况物体的translateZ>0图2表示物体translateZ<0的情况实线圆表示平行投影后的大小,也表示透视投影中物体translateZ=0的情况。蓝色圆圈表示透视投影后投影中心到投影面的距离:d为perspective的值。如果物体translateZ>=d,则不会出现在投影面上中间的物体到投影面的距离:z为translateZ的值perspective-originperspective-origin为单点透视中的消失点,每个立方体可以理解为不同来源时显示的图片读者可以通过在线示例了解更多细节:https://codepen.io/dkplus/pen/powJYgm
