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.
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.
Worked example: the neutral starting point
Every rotation starts at zero, so the default output is the card at rest with the 3D plumbing already in place:
.card-3d-parent {
perspective: 600px;
}
.card-3d {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform-style: preserve-3d;
transition: transform 0.12s ease-out;
}
.card-3d-face {
backface-visibility: hidden;
}
perspective goes on the parent, not the card. It sets how far the viewer is from the scene, so it only affects children of that element. transform-style: preserve-3d keeps the card's own children in 3D space instead of flattening them. backface-visibility: hidden hides a face once it has turned away, which is what you need for flip cards.
Try dragging the card, or set rotate Y to 25deg, and the same CSS will keep working: only the numbers inside transform: rotateX() rotateY() rotateZ() translateZ() change.
What each axis does
| Property | Effect |
|---|---|
| rotateX() | Tilts the card forward or back, like a laptop screen opening. |
| rotateY() | Turns the card left or right, like a door or a page. |
| rotateZ() | Spins the card in its own plane, like a clock hand. No depth involved. |
| translateZ() | Moves the card toward or away from the viewer. |
| perspective | Lower values (around 300–600px) give strong, dramatic depth. Higher values (1000px and up) look subtle and flatter. |
Frequently asked questions
Why isn't my 3D transform showing any depth?
3D CSS transforms need perspective set on a parent element to create the vanishing-point effect — without it, rotateX/rotateY transforms will still apply mathematically but render completely flat, since there's no perspective to reveal the depth.
What's the difference between transform-style: flat and preserve-3d?
flat (the default) squashes a transformed element's children back onto its own flat plane. preserve-3d keeps children in true 3D space relative to their parent, which is required for effects like a rotating cube built from multiple stacked faces.
Why does my 3D element look blurry or jagged while rotating?
This is usually a GPU rendering artifact from a steep rotation angle combined with fine text or thin borders. Adding backface-visibility: hidden and avoiding sub-pixel rotation angles (very slight, oddly-specific degrees) can both help sharpen the result.
Does perspective distance change how dramatic the 3D effect looks?
Yes — a smaller perspective value (e.g. 300px) creates a strong, exaggerated depth effect since the vanishing point is close. A larger value (e.g. 1500px) creates a much subtler, flatter-looking 3D effect since the vanishing point is far away.
