CSS 3D Transform Playground
Build 3D transforms with live preview, generate the perspective and transform-style declarations a card flip needs, and see why transform order changes the result.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Transform order is not commutative
Writing rotate then translate produces a different result from translate then rotate, because each transform applies to the coordinate system the previous one left behind. Rotating first turns the axes, so a subsequent translation moves along the rotated axes rather than the original ones. This trips people up constantly and it is not a quirk: it is how composing transformations works, and the transforms apply left to right in the order written.
Perspective has to be on the parent
A 3D rotation looks flat without perspective, because the default projection has no vanishing point and the far edge of a rotated element does not shrink. Setting perspective on the parent establishes a viewing distance for all its children together, which is what makes several rotated elements look like they share a scene. Setting it in the transform on the element itself gives each one its own vanishing point, so they look like separate flat pictures rather than objects in a space.
The card flip needs three declarations working together
A flip requires transform-style preserve-3d on the container so the faces stay in 3D rather than being flattened, backface-visibility hidden on both faces so the back does not show through, and the back face pre-rotated 180 degrees so it faces the right way when the container turns. Omit any one and the result is subtly wrong in a way that is difficult to diagnose from the output.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
Why does transform order matter?
Because each transform applies to the coordinate system left by the previous one. Rotating first turns the axes, so a following translation moves along the rotated axes. The transforms apply left to right as written.
Why does my 3D rotation look flat?
Because no perspective is set. Without it there is no vanishing point, so the far edge of a rotated element does not shrink and the rotation reads as a squash rather than a turn.
Should perspective go on the parent or in the transform?
On the parent, in almost every case. That gives all its children a shared viewing point so they look like objects in one scene. Setting it per element gives each its own vanishing point and they look like separate flat pictures.
What does transform-style preserve-3d do?
It keeps child elements positioned in the 3D space of their parent rather than flattening them into its plane. Without it a card flip has nothing to flip, since both faces are collapsed onto the same plane.
Do 3D transforms affect performance?
They are composited on the GPU and are among the cheapest things to animate, alongside opacity. Animating layout properties such as width or top is far more expensive because it forces layout and paint on every frame.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Adjust the rotation and perspective controls to build a 3D transform.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.