admin管理员组文章数量:1530842
简单的理解,景深就是我们的肉眼距离显示器的距离,景深越大,元素离我们越远,效果就不好,在我们CSS3中,perspective用于激活一个3D空间,属性值就是景深大小(默认none无景深)
应用景深的元素称为“舞台元素”,舞台元素的所有后代元素都会受影响,(如果后代元素中也添加了perspective属性,效果会叠加而不是覆盖)
第一种写法
在父元素中定义css属性perspective
第二种写法
在自身元素的css属性transform中定义perspective()函数
transform: perspective(depth);
depth的默认值是none,可以设置为一个长度值,这个长度是沿着Z轴距离坐标原点的距离。1000px被认为是个正常值
若使用perspective()函数,那么他必须被放置在transform属性的首位,如果放在其他函数之后,则会被忽略
perspective-origin
同perspective属性,也是设置在父元素上,对后代元素起作用。 这个属性来设置你在X, Y轴坐标确定的那个点来看这个元素,Z轴是被perspective属性设置的
灭点
指的是立体图形各条边的延伸线所产生的相交点。透视点的消失点
总结
景深让3D场景有近大远小的效果,是一个不可继承属性,但他可以作用于后代元素(不是本身)。
景深越大,灭点越远,元素变形更小。
景深越小,灭点越近,元素变形更大。
景深可以叠加,内部计算逻辑及其复杂,所以要避免景深叠加!
本文标签: 景深perspective
版权声明:本文标题:景深(perspective) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1725895067a1047537.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论