css 3d transform generator

CSS 3D Transform & Perspective Generator

Tilt a card on the X, Y, and Z axes with real perspective depth — the kind of number you can't guess in your head (perspective(500px) rotateX(20deg) rotateY(-20deg)) but can absolutely feel with a slider.

preview.html

3D Card Drag or use the sliders

Back side Rotate Y past 90° to see me

controls

rotate X 0°

rotate Y 0°

rotate Z 0°

perspective distance 600px

lift toward viewer (translateZ) 0px

tilt by dragging the card

auto-reset when mouse leaves

presets

transform-3d.css

Why 3D CSS transforms need a slider, not a guess

A transform: perspective(500px) rotateX(20deg) rotateY(-20deg) declaration involves four interacting numbers, and the same rotation values look completely different depending on the perspective distance — a shallow perspective exaggerates the tilt, a deep one flattens it. There's no way to predict that combination without seeing it move.

Using the generated 3D transform CSS

The perspective value belongs on the parent container (or as the first function in the same transform property, using perspective() as shown here) so the child element has real depth to rotate through, rather than just skewing flat.