css3的父元素设置perspective与子元素设置perspective()景深怎么叠加的

html-css023

css3的父元素设置perspective与子元素设置perspective()景深怎么叠加的,第1张

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

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

3d旋转,顾名思义就是立体旋转,涉及到三个轴向,x,y, z,2D旋转只有两个轴向,x,y关键就在z轴呢,我来解释下z轴

z轴就是物体远近,近大远小,所以会使元素看上去会变大,这个是正常的,css3 3D还有个属性就是-webkit-perspective:这个的含义就是景深,就是这个元素离你的眼睛多远,这两个属性有一定的联系,