CSS Transform Generator
Adjust translate, rotate, scale, skew, 3D rotation, perspective and the transform origin, and watch the preview and generated CSS update instantly. Properties left at their defaults are omitted, so you get only the CSS you need. Start from a preset such as a tilted 3D card or a flip. To animate the result, try the CSS Animation Generator.
🔒 Runs in your browser · Your data is never sent to a server
Presets
Preview
Transform settings
How to use
- Pick a starting point from "Presets", or just move the sliders.
- Tune the values under "Translate", "Rotate", "Scale" and "Skew" while checking the preview.
- For a 3D look, set "Perspective" and add a Rotate X or Rotate Y angle.
- Click "Copy" and paste the CSS into your stylesheet. Use "Reset" to start over.
Notes
- The output puts the `perspective()` function at the start of `transform`. This looks different from setting the `perspective` property on a parent when several children are laid out side by side.
- Transform functions are applied from left to right, so reordering them changes the result. This tool always outputs translate, rotate, scale, then skew.
- `transform-origin` is omitted when it is the default (50% 50%).
- Skew is limited to +/-89 degrees; near 90 degrees the element stretches out of view.
- `transform` changes only how an element is painted; it does not affect the layout around it.
Glossary
transform
The CSS property that moves, rotates, scales, or skews an element. Several functions can be listed with spaces and are applied from left to right.
perspective
Sets how strong the depth effect is in 3D transforms. Smaller values give stronger perspective; larger values look flatter.
transform-origin
The point that rotation and scaling are anchored to. The default is the element center (50% 50%); setting it to the top-left rotates around that corner.
FAQ
Does the order of transform functions matter?
Yes. Functions are applied from left to right, so "translate then rotate" lands somewhere different from "rotate then translate". This tool outputs translate, rotate, scale, then skew; reorder the copied CSS if you need another order.
My 3D rotation looks flat. What is missing?
Rotating around the X or Y axis alone looks flat. Set "Perspective" to around 600-1000 px to add depth; smaller values give a stronger effect.
What is the difference between perspective() and the perspective property?
This tool puts `perspective()` at the start of `transform`, which is fine for a single element. If several children should share one vanishing point, set the `perspective` property on their parent instead.
What does changing transform-origin do?
It moves the anchor point for rotation and scaling. The default is the center (50% 50%); at 0% 0% the element rotates around its top-left corner. The line is omitted from the output when it is the default.
Why can I not set skew to 90 degrees?
Near 90 degrees the element stretches toward infinity and disappears, so the range is limited to +/-89 degrees.
Share this page