当前位置: 首页 > Web开发 > 开发 >正文

浅谈css perspective属性和perspective()函数的异同点

来源:互联网时间:2021-06-30 11:10:11编辑:网友分享
css perspective属性和perspective()函数间有什么差异?本篇文章带大家简单对比一下perspective属性和perspective()函数,了解一下它们间的异同点。
css perspective属性和perspective()函数间有什么差异?本篇文章带大家简单对比一下perspective属性和perspective()函数,了解一下它们间的异同点。

浅谈css perspective属性和perspective()函数的异同点

perspective

透视属性perspective 用于激活元素上的三维空间,以便其子元素可以定位在该空间中。

它允许您通过使 z 轴上较高的元素(靠近观察者)显得更大,而远离的元素显得更小,从而为场景添加深度感。

浅谈css perspective属性和perspective()函数的异同点

在线 Demo

可以在 3D 形状(例如立方体)上最好地展示元素的透视效果。

在这个演示中,存在三个相同的立方体,都具有相同的变换。他们每个都有不同的视角集。尝试更改透视的值以查看场景深度如何变化。

透视值越高,效果越弱,透视值越低,效果越强。

因为掘金不支持引进 iframe 预览, 预览效果见 codepen css perspective demo

浅谈css perspective属性和perspective()函数的异同点

参考翻译

本文主要参考翻译自:

  • https://tympanus.net/codrops/css_reference/perspective/

但因为原文有些太啰嗦,章节及目录均有所调整。

原文地址:https://juejin.cn/post/6978259550881677349

更多编程相关知识,请访问:编程视频!!

以上就是浅谈css perspective属性和perspective()函数的异同点的详细内容,更多请关注web开发者其它相关文章!

上一篇: javascript怎么实现浮动窗口

下一篇:浅谈JavaScript中如何操作光标和

您可能感兴趣的文章

相关阅读