CSS Transform Generator
Use the sliders to move, turn, resize, skew and tilt a box. A dashed outline marks where it started. The transform line only includes what you changed.
The orange fill and the dashed outline are not part of the CSS. Perspective should come first in the list, which this tool does for you.
About CSS Transform Generator
The transform property moves, turns, resizes and slants an element without changing the layout around it. It has many functions, and because they combine in the order written, it is easy to get an unexpected result. This generator lets you set each value with a slider and shows the box against a dashed outline of where it started.
Beyond the flat transforms, you can tilt the box forwards, turn it sideways and set a perspective for a three-dimensional look, and you can move the origin that everything turns around. Only the values you change are written out, and perspective is placed first, where it has to be, so the result matches what you see.
How to use CSS Transform Generator
- Move the sliders for the movement, rotation, scale and skew.
- Add perspective and tilt for a 3D effect.
- Choose the origin to change the pivot point.
- Copy the CSS.
Common uses
- Previewing a hover effect before writing it
- Learning how transform functions combine
- Creating a tilted card or a flipped panel
- Finding the right transform origin for a rotation
Frequently asked questions
Does order matter?
Yes. Transforms are applied from right to left, so moving then rotating lands somewhere different from rotating then moving. The tool uses a fixed, sensible order and shows the result.
What is transform origin?
It is the point the element turns and scales around. By default it is the centre. Moving it to a corner makes a rotation swing like a door.
What does perspective do?
It sets how far away the viewer is from the element. A small value exaggerates the depth of a tilted element, and a large value makes it look almost flat. It must come first in the list to take effect.
Does a transform change the layout?
No. The element still takes up its original space, so neighbouring content does not move. Only the way it is drawn changes.