perspective

perspective gives transformed children a shared 3D projection. Smaller distances produce stronger foreshortening; larger distances look flatter. Put this property on the parent, not the child you intend it to project.

Compare near and far perspective

Both faces rotate by 45 degrees. Their parents use 200px and 1000px viewing distances, changing the visible near/far edge difference.

<p>200px perspective</p>
<div class="scene near"><div class="face">Near</div></div>
<p>1000px perspective</p>
<div class="scene far"><div class="face">Far</div></div>

.scene {
  perspective: 250px;
  width: 200px;
  height: 120px;
  margin: 1rem;
  background: #eff6ff;
}
.face {
  width: 120px;
  height: 80px;
  background: #2563eb;
  color: white;
  padding: 0.5rem;
  box-sizing: border-box;
  transform: rotateY(45deg);
}
.near {
  perspective: 200px;
}
.far {
  perspective: 1000px;
}

Project a child moved toward the viewer

A positive translateZ brings the child closer, so the perspective projection makes it appear larger. Its normal layout dimensions remain 120×80.

<div class="scene"><div class="face">Closer in Z</div></div>

.scene {
  perspective: 250px;
  width: 200px;
  height: 120px;
  margin: 1rem;
  background: #eff6ff;
}
.face {
  width: 120px;
  height: 80px;
  background: #2563eb;
  color: white;
  padding: 0.5rem;
  box-sizing: border-box;
  transform: rotateY(45deg);
}
.face {
  transform: translateZ(50px);
}

Values and defaults

The initial value is none and the property is not inherited. A nonnegative length supplies the viewer’s distance from the z=0 plane; values below 1px are clamped to 1px. Negative values and percentages are invalid. Portions at or beyond the viewer’s projection boundary may not be drawn.

Common mistakes

Without a depth/3D transform, there may be no visible effect. Perspective on an element affects its children; transform:perspective(…) affects that element’s own transform list. A non-none perspective creates a stacking context and a containing block for fixed-position descendants. Preserve-3d is a separate decision about nested 3D space, not a required decoration for every 3D face.

Learn perspective-origin, transform-style, and transform.

Sources and browser support

MDN: perspective describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.