CSS 3D — Perspective & the Z-axis

There is no 3D until you add a camera. Set perspective, push a panel toward you with translateZ, rotate it on all three axes, then flip a card. The Z-axis points out of the screen, at your face.

1 · perspective + translateZ = depth

perspective lives on the parent and is how far your eye is from the screen — smaller = stronger, more dramatic 3D. translateZ moves the element along the Z-axis: positive brings it closer (looks bigger), negative pushes it away.

600px
0px
50%
50%
Parent (the camera)
perspective: 600px; perspective-origin: 50% 50%;
Child
transform: translateZ(0px);
Z-axis
= depth translateZ(0px)

Tip: drop perspective to ~250px and watch the motion turn dramatic. Crank it to 1600px and it flattens out — that's a telephoto lens vs a wide angle.

2 · the three rotation axes

rotateX tips it forward/back (nodding "yes"), rotateY turns it left/right (shaking "no"), rotateZ spins it flat like a clock hand. Combine them to aim the panel anywhere.

-20deg
30deg
0deg
Live transform
transform: rotateX(-20deg) rotateY(30deg);
X = forward/back Y = left/right Z = flat spin
FRONT

3 · your first real 3D component — the flip card

A flip is just rotateY(180deg) on a parent with transform-style: preserve-3d, two faces stacked with backface-visibility: hidden, and the back pre-rotated 180°. Click the card.

CLICK ME
HELLO 3D

No backface-visibility? You'd see the back's text mirror through the front like a wet napkin. That one line is the whole trick.