perspective()

**perspective()** CSS 函数 定义了一种变换，用于设置用户与 z=0 平面之间的距离，即如果二维界面是三维的，则观察者的视角。其结果为 <transform-function> 数据类型。

试一试

perspective() 变换函数是应用于被变换元素的 transform 值的一部分。这与 perspective 和 perspective-origin 属性不同，后者附加到在三维空间中变换的子元素的父元素。

语法

perspective() 使用的透视距离由 <length> 值指定，该值表示用户与 z=0 平面之间的距离，或由 none 指定。z=0 平面是所有内容以二维视图显示的平面，或屏幕。负值是语法错误。小于 1px（包括零）的值将钳制到 1px。除 none 之外的值会导致具有正 z 位置的元素显得更大，而具有负 z 位置的元素显得更小。z 位置等于或大于透视值的元素会消失，就像它们在用户后面一样。透视值越大，变换越小；perspective() 值越小，变换越大；perspective(none) 表示来自无限远处的透视，并且没有变换。

css
perspective(d)

值

d

是表示用户到 z=0 平面距离的 <length>。如果它是 0 或负值，则不应用透视变换。

笛卡尔坐标 在 ℝ^2 上 齐次坐标 在 ℝℙ^2 上 笛卡尔坐标在 ℝ^3 上 齐次坐标在 ℝℙ^3 上

此变换应用于 3D 空间，无法在平面上表示。

 这种变换不是ℝ^3中的线性变换，不能用笛卡尔坐标系矩阵表示。 ( 1 0 0 0 0 1 0 0 0 0 1 0 0 0 − 1 / d 1 ) \left( \begin{array}{cccc} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & -\frac{1}{d} & 1 \\ \end{array} \right)

示例

HTML

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 (9cm):</p>
<div class="perspective-box-far">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

<p>With perspective (4cm):</p>
<div class="perspective-box-closer">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

CSS

css
.face {
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 100px;
  text-align: center;
}

p + div {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  margin-left: 100px;
}
.no-perspective-box {
  transform: rotateX(-15deg) rotateY(30deg);
}

.perspective-box-far {
  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
}

.perspective-box-closer {
  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
}

.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);
}

结果

规范

规范
CSS Transforms 模块级别 2
# funcdef-perspective

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅