W3cubDocs

/CSS

perspective()

The perspective() CSS function defines a transformation that sets the distance between the user and the z=0 plane. Its result is a <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 transformation applies to the 3D space and can't be represented on the plane.

This transformation is not a linear transformation in ℝ3, and can't be represented using a Cartesian-coordinate matrix. 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

Browser compatibility

Please see the <transform-function> data type for compatibility info.

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective