perspective()

The perspective() CSS function defines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.

Syntax

perspective(d)

Values

d
Is a <length> giving the distance from the user to the z=0 plane. It is used to apply a perspective transform to the element. 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 plan.

A perspective is not a linear transform in ℝ3 and cannot be represented using a matrix in the Cartesian coordinates system. 100001000010001/d1

Examples

Applying perspective on a 3D object

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: blue;
  transform: rotateX(90deg) translate3d(0, 0, 50px);
}
.left{
  background-color: red;
  transform: rotateY(-90deg) translate3d(0, 0, 50px);
}
.front{
  background-color: green;
  transform: translate3d(0, 0, 50px);
}

Result

Document Tags and Contributors

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