Perspective

CSS

Two focused demos: move the vanishing point with perspective-origin, then see how camera distance changes perceived depth.

perspective-origin — vanishing point

Controls

perspective600px

origin-x50%

origin-y50%

.scene {
perspective: 600px;
perspective-origin:
50% 50%;
}

perspective — camera distance

Z: -180px

Z: 0px

Z: +180px

Controls

perspective2000px

.scene { perspective: 2000px; }

.far { transform: translateZ(-180px); }
.mid { transform: translateZ(0px); }
.near { transform: translateZ(180px); }

concepts

perspective

The virtual camera distance from the Z=0 plane. Lower values create dramatic distortion (wide-angle lens); higher values look nearly flat (telephoto). Drag the slider in demo 2 to extremes to feel the difference.

perspective-origin

The vanishing point — where parallel lines appear to converge. In demo 1, drag origin-x left and right to shift it. It is just a 2D coordinate on the scene container, not a 3D property.

translateZ

Moves an element toward or away from the viewer along the Z-axis. With perspective set, positive Z makes elements appear larger (closer) and negative Z makes them appear smaller (farther).

core pattern

.scene {
  perspective: 600px;
  perspective-origin: 50% 50%;
}

/* demo 1 — grid floor */
.grid { transform: rotateX(75deg); }

/* demo 2 — depth stack */
.far  { transform: translateZ(-180px); }
.mid  { transform: translateZ(0px); }
.near { transform: translateZ(180px); }