为什么css3的perspective设置大小不同,会有不同的3d效果

html-css010

为什么css3的perspective设置大小不同,会有不同的3d效果,第1张

perspective是设置3d效果的景深,通俗来说就是设置你的眼睛与这个3d元素的距离。而生活经验告诉我们,你从远处和近处分别观察一个物体(比如正方形)时,其3d效果肯定是不同的。

还有一个属性是perspective-origin,则是用来设置3d效果的视角的,说白了就是你观察3d元素的角度,正常情况下物体是放在你眼睛的正前方,你眼睛只需平视即可,如果把物体向上下左右不同方向移动,在你的头部不能移动的前提下,你的眼睛要想看到物体就需要随着物体的移动而转动,这就是视角。而在不同的视角下,物体的3d效果肯定也会不同(比如物体移动到你眼睛的上方,你能看到物体的底面,而当它移动到你眼睛的下方时,你看不到底面了,只能看到顶面)。

perspective这个就是观察者的视角。

举个例子:

想象自己面对着一堵10米的墙,将墙体旋转不同的角度,那么在距离这墙1米远、2米远、100米远时,看到的结果很明显是不一样的。