Log in Sign up free

CSS Transform Generator

Build CSS transforms — translate, rotate, scale, skew and 3D perspective — with a live preview and copy-ready code.

Runs instantly in your browser — results update as you type.

How do I rotate, scale or move an element with CSS?

Set translate, rotate, scale, skew, 3D rotation and perspective values and watch a sample box change live against its original outline. The generator combines them into a single transform declaration in the correct order, with transform-origin and an optional transition.

Good to know

  • Transforms do not move surrounding elements — the layout space stays where it was.
  • The order of functions matters: rotate then translate is different from translate then rotate.
  • Animate transform and opacity rather than top/left/width for smooth 60 fps animation.
  • Add perspective for realistic 3D rotations.

Frequently asked questions

What is transform-origin?

The point the element rotates or scales around — the centre by default.

Can I use the separate rotate/scale properties?

Yes, modern browsers support them, but a single transform works everywhere.

Is it free?

Yes.