CSS 3D Transform Generator

Generate CSS 3D transforms with live preview. Control rotateX, rotateY, rotateZ, translateZ, and perspective.

Perspective: 800pxRotate (X,Y,Z): 30°, 45°, 0°Translate Z: 0pxScale Factor: 1x

Presets:

Controls

Perspective (800px)

RotateX (30deg)

RotateY (45deg)

RotateZ (0deg)

TranslateZ (0px)

Scale (1)

Live Preview

3D Preview

CSS Output

.element {
  transform: rotateX(30deg) rotateY(45deg) rotateZ(0deg) translateZ(0px) scale(1);
}

.container {
  perspective: 800px;
}

CSS 3D Transform Generator

Visually build CSS 3D transforms by dragging sliders for rotateX, rotateY, rotateZ, translateZ, scale, and perspective. The live preview updates instantly and the generated CSS is ready to copy. Use the perspective property on the parent container and the transform on the element itself.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Building a card-flip or a tilt effect with a live preview.
Getting the perspective and rotation values that match a design.
Comparing rotation axes to find the effect you want.
Producing a transform without trial-and-error in devtools.
Checking how a 3D effect reads at the size it will be used.

Frequently Asked Questions

Why does perspective go on the parent and not the element?: Because it describes the viewer's distance from the whole scene, not a property of one object. Setting `perspective` on the parent makes children share one vanishing point; setting `perspective()` inside an element's own transform gives each element its own, so a row of cards distorts inconsistently.
Nothing happens when I change translateZ — why?: Because without a perspective there is no projection, and a Z translation is a movement directly toward a camera that does not exist. Set `perspective: 800px` on the container and the same translateZ starts scaling the element. A smaller value is a wider lens and an more extreme effect.
In what order do the transform functions apply?: Right to left as coordinate-space operations, which reads as left to right in effect: each one operates on the space the previous one produced. So `rotateY(45deg) translateZ(100px)` moves along the ALREADY-rotated Z axis, while reversing them moves first and then rotates the whole thing.
Why do my child elements stay flat?: Because `transform-style` defaults to `flat`, which flattens descendants into the parent's plane. A card-flip or a cube needs `transform-style: preserve-3d` on the container. Note that several properties — including `overflow: hidden` and any `filter` — force flattening back on regardless.
How do I hide the back of a flipped element?: `backface-visibility: hidden` on the face itself. It is what makes a two-sided card work: both faces are stacked at the same position, each rotated 180° from the other, and whichever is facing away is not drawn. Without it you see a mirrored version of the front through the back.

Common errors and gotchas

Omitting perspective, which makes a 3D rotation look flat and wrong.
Setting perspective on the transformed element rather than its parent, which changes the result.
Forgetting `backface-visibility` on a flip, so the reverse side shows through.
Creating a stacking context that breaks the sibling ordering you relied on.
Animating a 3D transform on a large element, which can be expensive on low-end devices.