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


本文摘自PHP中文网,作者青灯夜游,侵删。

css perspective属性和perspective()函数间有什么差异?本篇文章带大家简单对比一下perspective属性和perspective()函数,了解一下它们间的异同点。

perspective

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

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

1.gif

此图像中的蓝色圆圈表示三维空间中的一个元素。 字母 d 表示透视值,即观察者眼睛与屏幕之间的假定距离。 字母 Z 表示元素在 z 轴上的位置。 元素在 z 轴上越远,相对于观察者的外观越小,越近,看起来越大。 这就是立体空间中透视的效果。

在不指定透视的情况下,使用三维变换函数变换的元素将看起来是平面和二维的。

透视属性perspective 与 CSS 变换 transforms 结合使用。 它需要一个长度值或关键字 none。 将此属性与 none 以外的任何值一起使用可建立堆叠上下文。 它还建立了一个包含块(有点类似于 position:relative),就像 transform 属性所做的那样。

下图显示了在指定和不指定透视的情况下在三维空间中变换(旋转)一个元素的结果。

2.gif

使用 rotateY() 函数将图像在 y 轴上旋转 50 度。 左边的图像显示了在指定透视的情况下应用旋转的结果,右边的图像显示了没有透视的相同变换。 在右边的图像中,变换看起来是平面和二维的,因为没有触发三维空间。

默认情况下,3D 空间的消失点(vanishing point)位于中心。 (它可以使用透视原点属性 perspective-origin进行更改。)

官方语法

  • 声明:

1

perspective: none | <length>

  • 初始值:none
  • 适用于:transformable elements
  • 动画: 可以,作为长度

值(Values)

none

没有应用透视,因此没有触发三维空间。

<length>

指定观察者和 z=0 平面之间的假定距离。它用于计算透视矩阵,使之将透视变换应用于元素及其内容。如果设置为零,则不应用透视。不允许使用负值。有关可能值的列表,请参阅 <length> 条目。

例子

阅读剩余部分

相关阅读 >>

css怎么设置不显示文字

css设置背景图大小该怎么做

使用html+css制作一些动画提示工具

css怎么设置文件编码

hover在css中有什么用?

css怎么加下划线

css怎么设置斜体样式

css每条声明由一个什么组成

css如何修改背景图片宽高

css class是什么意思

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...