CSS 3D perspective generator — tilt cards in real depth

How to use the CSS 3D perspective generator

1. Set the Perspective distance from 100 to 2,000 px. Lower is more dramatic.
2. Tilt the card with rotateX (top and bottom edges), rotateY (left and right edges) and spin it flat with rotateZ.
3. Use translateZ to bring the card forward or push it back.
4. Move the vanishing point with perspective-origin if the viewer should look from above, below or the side.
5. Copy both rules: .scene goes on the parent, .card on the element you tilt.

What it does and when to use it

CSS 3D transforms make flat elements look like objects in space. Typical uses are product cards that tilt slightly on hover, cover-flow style galleries, flip cards with a question on the front and the answer on the back, and isometric-looking feature panels.

For flat moves, turns and scaling, the CSS transform generator is simpler. To animate the tilt on hover, add the CSS transition generator, and to give the card depth with a shadow, the box shadow generator.

How it works

The .scene rule gets perspective: <distance>px, plus perspective-origin when you choose something other than centre. The .card rule gets the transform functions you changed, always in the order translateZ, rotateX, rotateY, rotateZ, followed by transform-style: preserve-3d. Any function left at 0 is dropped; if all are 0 the transform is none.

MDN lists perspective, perspective-origin and transform-style as Baseline widely available since September 2015.

Worked examples

The default tilt, perspective 800 px:

.scene {
  perspective: 800px;
}
.card {
  transform: rotateX(20deg) rotateY(-30deg);
  transform-style: preserve-3d;
}

The card leans back and turns its left edge away from you.

A door half open. Perspective 300 px, rotateY 60°, nothing else: transform: rotateY(60deg);. With the short distance, the near edge looks much taller than the far one.

A card lifted towards the viewer from above. Perspective 1,200 px, translateZ 100 px, perspective-origin top: the scene gets perspective-origin: top; and the card transform: translateZ(100px);. It appears larger and as if seen from slightly above.

Limits and tips

• The back of a rotated card is visible past 90°, mirrored. For flip cards, add backface-visibility: hidden to each face by hand.
• Text on steep angles is hard to read. Keep tilts small on anything people need to read.
• 3D motion can cause discomfort. If you animate it, honour prefers-reduced-motion and keep movements short.