CSS perspective 属性指定了 z=0 平面与用户之间的距离。它有助于为 3D 定位的元素提供一些视角。
- perspective 属性的值决定了效果的强度。
- 对于较大的透视值，变换将是较小的，而对于较小的透视值，变换将是较大的。
- 使用 z>0 的每个 3D 元素将更大，使用 z<0 将更小。
- 当 z 轴坐标的值大于透视的值时，不能在三维空间上绘制元素。
- 默认情况下，消失点，即观众/用户正在观看的位置，是中心。
- 可以使用 CSS 属性 perspective-origin 更改消失点。
- 当向此属性传递一个值而不是 none 时，它的作用类似于具有 position： fixed value 的元素的包含块。
可能的值
CSS perspective 属性可以具有以下值之一：
1. none：不应用透视变换。
2. <length>：指定用户到 z=0 平面的距离。
- 将透视变换应用于元素的子元素。
- 不允许使用负值，否则将被视为语法错误。
- 小于 1px 的值被限制为 1px。
适用于
所有可转换元素。
语法
perspective = none | <length>
CSS perspective - <length>值
以下示例演示了如何使用 CSS perspective 属性来使用各种单位值 <length>。
<html>
<head>
<style>
.container {
width: 150px;
height: 150px;
margin: 75px 0 0 75px;
border: none;
}
.cube {
width: 50%;
height: 50%;
perspective-origin: 120% 120%;
transform-style: preserve-3d;
padding: 50px;
}
.face {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 80px;
font-size: 3.5em;
color: white;
text-align: center;
}
.front {
background: rgba(178, 0, 178, 0.5);
transform: translateZ(50px);
}
.back {
background: rgba(178, 178, 0, 0.5);
color: black;
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(0, 0, 178, 0.5);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgba(178, 0, 0, 0.5);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgba(0, 200, 0);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgba(0, 0, 0, 0.2);
transform: rotateX(-90deg) translateZ(50px);
}
.length-cm {
perspective: 10cm;
}
.length-em {
perspective: 15em;
}
.length-px {
perspective: 200px;
}
.length-neg {
perspective: -100px;
}
</style>
</head>
<body>
<h1>perspective</h1>
<div class="container">
<p>perspective: 10cm</p>
<div class="cube length-cm">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
<p>perspective: 15em</p>
<div class="cube length-em">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
<p>perspective: 200px</p>
<div class="cube length-px">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
<p>perspective: -100px</p>
<div class="cube length-neg">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</div>
</body>
</html>
CSS perspective - none 值
以下示例演示了如何使用 CSS perspective 属性，其中值为 none。
<html>
<head>
<style>
.container {
width: 150px;
height: 150px;
border: none;
}
.cube {
width: 50%;
height: 50%;
perspective: none;
perspective-origin: 120% 120%;
transform-style: preserve-3d;
}
.face {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 80px;
font-size: 3.5em;
color: white;
text-align: center;
}
.front {
background: rgba(178, 0, 178, 0.5);
transform: translateZ(50px);
}
.back {
background: rgba(178, 178, 0, 0.5);
color: black;
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(0, 0, 178, 0.5);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgba(178, 0, 0, 0.5);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgba(0, 200, 0);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgba(0, 0, 0, 0.2);
transform: rotateX(-90deg) translateZ(50px);
}
</style>
</head>
<body>
<div class="container">
<p>perspective: none</p>
<div class="cube">
<div class="face front"></div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</div>
</body>
</html>
