Design Atlas
한국어
✦ Visual effects

perspective

The viewing distance between the imaginary camera and the z=0 plane for 3D transforms. Smaller means an exaggerated, close vanishing point; larger looks flat and subtle.

Also known as: 3D viewing distanceCSS camera distance
···
html
<div class="row">
  <div class="col"><div class="scene a"><div class="box">200px</div></div><div class="cap">perspective: 200px</div></div>
  <div class="col"><div class="scene b"><div class="box b2">1200px</div></div><div class="cap">perspective: 1200px</div></div>
</div>
css
.row{display:flex;gap:16%}
.col{display:flex;flex-direction:column;align-items:center;gap:10px}
.scene{perspective:200px}
.scene.b{perspective:1200px}
.box{width:26vmin;max-width:110px;aspect-ratio:1;border-radius:14px;display:grid;place-items:center;color:#fff;
  font:700 13px/1.2 monospace;background:linear-gradient(135deg,#5b5bf7,#18c29c);animation:spin 4s linear infinite}
.box.b2{background:linear-gradient(135deg,#f25c8a,#ffb648)}
@keyframes spin{to{transform:rotateY(360deg)}}
.cap{font:600 12px monospace;color:var(--muted)}

rotateX/rotateY alone show no depth — perspective is what creates it. Set perspective: 200px on the parent of the element you're rotating in 3D, and that parent becomes "a screen 200px from the camera" with children rotating inside it (or use the perspective(200px) transform function directly on the element — same effect).

A smaller value means the camera sits closer, so size and distortion swing dramatically as things rotate (a fisheye feel). A larger value means the camera is farther away, so the change is gentle. Compare the two boxes in the demo — same rotateY animation, but the perspective: 200px one warps far more aggressively.

For nested 3D structures (a cube, say), give the rotating group transform-style: preserve-3d too, or its own children get flattened instead of staying three-dimensional.

When to use

Use 800–1500px for a subtle depth (card flips, product showcases) and start around 200–400px for an exaggerated teaser/intro animation.