作者：纪志鹏大利集客_776 | 来源：互联网 | 2023-09-24 23:39
CSS perspective 属性用于为一个元素激活3D空间透视效果，使其子元素可以被放置在3D空间中。
通过 perspective 属性，可以使元素有远近的三维视觉效果，你可以增加Z轴值，使它更接近观察者，从而显示出更大的图像。或者减少Z轴值，使图像显得更小。
下图是W3C关于透视效果的一张说明图片：
图中蓝色的部分代表一个元素位于三维空间中。字母 d 代表透视度（perspective），它表示观察者的眼睛到屏幕之间的距离。字母 Z 代表元素在3D空间Z轴方向上的位置。元素的Z轴值越大，离观察者越远，看起来越小；Z轴值越小，离观察者越近，看起来越大。
perspective 属性通常和CSS transform 函数一起使用。 perspective 属性的取值可以是一个数据类型值，或者关键字 none 。当该属性的取值不是0或关键字 none 的时候，会为元素创建一个新的。
如果没有为元素设置 perspective 属性，而对它使用3D transform 函数进行转换的话，元素看起来将是二维的平面。
perspective 和 perspective()
当你想将一个元素转换为3D空间的时候，有两种方法。第一种是在元素的父元素上使用 perspective 属性，将其制作为3D空间。第二种是在被转换元素自身上使用 perspective() 函数。这两种方式有什么相同点和区别呢？
使用这两种方法都可以为元素制作3D透视效果，使元素具有远近的3D感觉。元素在Z轴方向的值越大，元素距离观察者就越远，观察者看到的图像就越小。反之，元素距离观察者就越近，观察者看到的图像就越大。
当你为一个元素使用 perspective() 函数的时候，你只为那个元素本身激活了3D透视空间。而使用 perspective 属性，你可以为一个父元素激活3D透视空间，使它里面的所有子元素都共享这个3D空间。
如果你为一个父元素使用了 perspective 属性来制作3D透视空间，同时又为它里面的子元素分别设置不同 perspective() 函数，那么各个子元素的实际效果会和你所期望的有所差别，因为各个子元素都有各自的3D空间和自己的消失点。
默认情况下。一个3D空间的消失点位于中间位置。如果元素不共享同一个3D空间，那么它们各自拥有自己的消失点。因此，使用 perspective() 函数的结果是各个元素都拥有自己的3D空间和消失点。为了避免这种情况的发生，所有元素应该共享一个3D空间。通过在父元素上使用 perspective 属性，可以使所有的子元素共享这个3D空间，拥有共同的消失点。
下面的两幅图片展示了 perspective 属性和 perspective() 函数的效果：
perspective属性设置在父容器元素上，所有子元素共享一个3D空间和消失点。各个元素使用 rotateY() 函数沿Y轴旋转60度。
各个元素拥有自己的 perspective() 函数，它们有各自的3D空间和消失点。
官方语法
perspective: none |
参数：
：使用值来指定观察者到z=0的平面之间的距离。为元素及其内容应用透视变换。当值为0时，无透视变换。长度值不允许为负数。
none ：不为元素应用3D透视效果，不会建立3D空间。 perspective 属性的初始值为 none 。
应用范围 perspective 属性可以应用在所有上。
示例代码 取值示例代码如下：
/* 关键字 */
perspective: none;
/* 值 */
perspective: 20px;
perspective: 3.5em;
perspective: inherit;
应用示例代码如下：
.container {
perspective: 1200px;
}
.element {
transform: translateZ(-80px) rotateX(45deg);
}
在线演示
下面是一个3D立方体的例子，通过为立方体的父容器设置不同的 perspective 值，得到不同透视效果的立方体。
perspective: 250px;
perspective: 350px;
perspective: 500px;
主要代码如下：
.pers250 {
perspective: 250px;
-webkit-perspective: 250px;
}
.pers350 {
perspective: 350px;
-webkit-perspective: 350px;
}
.pers500 {
perspective: 500px;
-webkit-perspective: 500px;
}
.container {
display: inline-block;
width: 200px;
height: 200px;
margin: 75px 0 0 30px;
border: none;
}
.cube {
width: 100%;
height: 100%;
backface-visibility: visible;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
-webkit-backface-visibility: visible;
-webkit-perspective-origin: 150% 150%;
-webkit-transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
width: 100px;
height: 100px;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}
.front {
background: rgba(0, 0, 0, 0.3);
transform: translateZ(50px);
-webkit-transform: translateZ(50px);
}
.back {
background: rgba(0, 255, 0, 1);
color: black;
transform: rotateY(180deg) translateZ(50px);
-webkit-transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(196, 0, 0, 0.7);
transform: rotateY(90deg) translateZ(50px);
-webkit-transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgba(0, 0, 196, 0.7);
transform: rotateY(-90deg) translateZ(50px);
-webkit-transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgba(196, 196, 0, 0.7);
transform: rotateX(90deg) translateZ(50px);
-webkit-transform: rotateX(90deg) translateZ(50px)
}
.bottom {
background: rgba(196, 0, 196, 0.7);
transform: rotateX(-90deg) translateZ(50px);
-webkit-transform: rotateX(-90deg) translateZ(50px);
}
浏览器支持
CSS perspective 属性的浏览器兼容性可以参考下面的兼容性列表：
京公网安备 11010802041100号