Home >CSS >CSS reference – properties, selectors, functions >perspective

perspective

perspective: none | <length>

The distance of the viewer from the plane of the page for the 3D transforms of descendants. Without it a rotation around the x or y axis looks just like narrowing; with it the nearer part of the element gets bigger and the farther part smaller. The smaller the value, the stronger the effect.

Values

length – the viewer distance: 800px gives a mild effect, 150px a very strong one. A negative value is an error.
none – no perspective.
perspective-origin – a separate property: where the viewer looks from, the default 50% 50% (the center of the element with the perspective).
the perspective() function – in transform directly on the rotated element: transform: perspective(400px) rotateY(45deg).

Initial value: none. Inherited: no. Applies to: transformable elements.

Examples

The same rotation rotate: y 50deg without perspective and with perspective on the parent:

<figure><div class="scene"><div class="card">A</div></div><figcaption>no perspective</figcaption></figure>
<figure><div class="scene depth-600"><div class="card">A</div></div><figcaption>perspective: 600px</figcaption></figure>
<figure><div class="scene depth-200"><div class="card">A</div></div><figcaption>perspective: 200px</figcaption></figure>

figure {
  display: inline-block;
  margin: 0 8px 8px 0;
  vertical-align: top;
}
figcaption { font: 12px/1.6 monospace; }
.scene {
  width: 120px;
  height: 80px;
  margin: 14px 0;
  outline: 1px dashed #999;
}
.depth-600 { perspective: 600px; }
.depth-200 { perspective: 200px; }
.card {
  height: 100%;
  background: #0088d1;
  color: #fff;
  font: 700 32px/80px sans-serif;
  text-align: center;
  rotate: y 50deg;
}

result

no perspective

perspective: 600px

perspective: 200px

Perspective on the parent applies to all descendants together – they share one vanishing point, so each card looks a little different. The perspective() function in transform gives each card its own and all of them look the same:

<div class="row shared"><div></div><div></div><div></div></div>
<div class="row own"><div></div><div></div><div></div></div>

.row {
  display: flex;
  gap: 10px;
  max-width: 300px;
  margin-bottom: 16px;
}
.row div {
  flex: 1;
  height: 50px;
  background: #8bc34a;
}
.shared { perspective: 300px; }
.shared div { transform: rotateY(40deg); }
.own div { transform: perspective(300px) rotateY(40deg); }

result

Things to watch out for

The perspective property belongs on the parent of the rotated elements. On the rotated element itself write the perspective() function into transform.
The perspective() function must come before the rotation in transform: rotateY(45deg) perspective(400px) looks the same as a plain rotation without perspective.
Nested elements with their own 3D rotation need transform-style: preserve-3d on the parent, otherwise they are flattened into its plane (see the flip card in backface-visibility).
A value other than none creates a new stacking context and a containing block for descendants with position: fixed, just like transform.

Browser support

Baseline – widely available: in all major browsers since September 2015, considered widely available since March 2018. Since version: Chrome 36, Firefox 16, Safari 9. As of October 2026 (MDN browser-compat-data).