perspective() - CSS: Cascading Style Sheets 编辑

The perspective() CSS function defines a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimensional. Its result is a <transform-function> data type.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

The perspective() transform function is part of the transform value applied on the element being transformed. This differs from the perspective and perspective-origin properties which are attached to the parent of a child transformed in 3-dimensional space.

Syntax

The perspective distance used by perspective() is specified by a <length> value, which represents the distance between the user and the z=0 plane. The z=0 plane is the plane where everything appears in a 2-dimensional view, or the screen. A positive value makes the element appear closer to the user than the rest of the interface, a negative value farther. The greater the value, the further away the perspective of the user is.

perspective(d)

Values

d

Is a <length> representing the distance from the user to the z=0 plane. If it is 0 or a negative value, no perspective transform is applied.

Examples

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

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

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• transform
• <transform-function>