The perspective() CSS function defines a transformation that sets the distance between the user and the z=0 plane. Its result is of the <transform-function> data type.

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. A positive value makes the element appear closer to the user, a negative value farther.

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.
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. 100001000010001/d1

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

Result

Document Tags and Contributors

 Contributors to this page: mfluehr, JSideris, Sebastianz, mrstork, SphinxKnight
 Last updated by: mfluehr,