admin 管理员组

文章数量: 1184232

简单的理解，景深就是我们的肉眼距离显示器的距离，景深越大，元素离我们越远，效果就不好，在我们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） 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1758681663a3089126.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。