perspective()
该perspective() CSS函数定义了设置用户和在z = 0平面之间的距离的变换。其结果是<transform-function>数据类型。
语法
perspective()所使用的透视距离由代表用户与z = 0平面之间的距离的<length>值指定。正值使元素看起来更接近用户，负值则更远。
perspective(d)可能值
_d_ <length>表示从用户到z = 0平面的距离。如果它是0或负值，则不应用透视变换。
Cartesian coordinates on ?2 | Homogeneous coordinates on ??2 | Cartesian coordinates on ?3 | Homogeneous coordinates on ??3 |
|---|---|---|---|
This transform applies to the 3D space and cannot be represented on the plane. | A perspective is not a linear transform in ?3 and cannot be represented using a matrix in the Cartesian coordinate system. | 10000100001000?1/d1 |
实例
HTML
<p>Without perspective:</p>
<div class="no-perspective-box">
? <div class="face front">A</div>
? <div class="face top">B</div>
? <div class="face left">C</div>
</div>
<p>With perspective (7.5cm):</p>
<div class="perspective-box">
? <div class="face front">A</div>
? <div class="face top">B</div>
? <div class="face left">C</div>
</div>CSS
.face {
? position: absolute;
? width: 100px;
? height: 100px;
? line-height: 100px;
? font-size: 100px;
? text-align: center;
}
.no-perspective-box {
? width: 100px;
? height: 100px;
? transform-style: preserve-3d;
? transform: rotateX(-15deg) rotateY(15deg);
? margin-left: 100px;
}
.perspective-box {
? width: 100px;
? height: 100px;
? transform-style: preserve-3d;
? transform: perspective(7.5cm) rotateX(-15deg) rotateY(15deg);
? margin-left: 100px;
}
.top {
? background-color: skyblue;
? transform: rotateX(90deg) translate3d(0, 0, 50px);
}
.left {
? background-color: pink;
? transform: rotateY(-90deg) translate3d(0, 0, 50px);
}
.front {
? background-color: limegreen;
? transform: translate3d(0, 0, 50px);
}结果
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
