来自团队 邓康 同学的分享
把三维物体变为二维图形表示的过程称为投影变换。
根据投影中心与投影平面之间距离的不同,投影可分为 「平行投影」 和 「透视投影」。平行投影的投影中心与投影之间的距离为无穷大,如左图;而对透视投影,这距离是有限的,如右图。
在 CSS 中,使用 transform3d
变换后的图形也就有了投影的概念。
平行投影包括斜平行投影和正平行投影
开启transform3d后,在未开启透视的情况下,所有html元素默认处于translateZ=0的状态,即属于正平行投影
在css中,只有一点透视的概念。消失点就是 perspective-origin
。
无数条投影线组成投影空间
透视投影的投影空间用四棱锥表示
平行投影的投影空间用四棱柱表示
最终投影得出的画面由棱柱/棱锥的每个截面(缩放到同一大小后)合成,所以透视投影就会出现近大远小,而平行投影反映了物体之间的绝对大小
css透视需要关注几个点
如图所示,
perspective-origin即一点透视中的消失点,可以把每个正方体理解为不同origin时展示的画面
读者可通过在线示例了解更多细节:https://codepen.io/dkplus/pen/powJYgm