CSS Transform Generator

How to use the css transform generator

1. Adjust the controls and watch the preview update.
2. Read the generated CSS below the controls.
3. Copy it into your stylesheet.

About this tool

transform applies functions in the order you write them, and the order matters: rotating then translating moves the element along its own rotated axes, while translating then rotating moves it first and spins it in place. If a transform behaves unexpectedly, the order is the usual reason.

Everything happens around the transform-origin, which defaults to the element's centre. Transforms do not affect layout — the element still occupies its original box, so neighbours do not move out of the way, and a scaled-up element will overlap them.

Because transforms are composited rather than laid out, they are cheap to animate. Animating transform and opacity is smooth; animating width, top or margin is not.

Common uses

• Nudging an element without disturbing layout.
• Building a hover effect that scales or rotates.
• Working out the exact transform to paste into a stylesheet.

Frequently asked questions

Why did my element overlap its neighbour?

Transforms do not change layout. The element keeps its original box, so scaling or translating makes it overlap rather than push things aside.

Does transform order matter?

Yes. Functions apply left to right, each in the coordinate system left by the previous one, so rotate then translate differs from translate then rotate.

Why is transform recommended for animation?

It is handled by the compositor and skips layout and paint, so it stays smooth where animating width or top would not.