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
}