What order are the transform functions applied in?

This tool writes them in the order translate, rotate, scale, skew, which matches the order they're combined in the transform property — CSS applies transform functions right-to-left in terms of the coordinate system, so changing the order in your stylesheet can change the visual result even with the same values.

What is transform-origin?

It's the pivot point that rotate and scale operate around — the default is the element's center. Changing it to, say, top left makes a rotation swing around that corner instead of spinning in place.

Why use transform instead of changing left/top/width/height?

transform (and opacity) are the two properties browsers can animate on the GPU compositor without triggering layout or paint, so transitions and animations built with transform are smoother and cheaper, especially on mobile.

Can I combine this with a CSS transition?

Yes — paste the generated transform value into a hover or class-toggle state and add `transition: transform 0.2s ease;` on the base rule to animate between states.

Does this tool send my design anywhere?

No — the preview and generated CSS are computed and rendered entirely in your browser.

CSS TRANSFORM GENERATOR

Move, rotate, scale, and skew a box with sliders and copy the matching transform CSS.

BOX

Translate X: 0px

Translate Y: 0px

Rotate: 0deg

Scale X: 100%

Scale Y: 100%

Skew X: 0deg

Skew Y: 0deg

Transform origin

CSS

transform: none;
transform-origin: center;

How to build a CSS transform

1
Drag the Translate X/Y sliders to move the box.
2
Drag Rotate, Scale X/Y, or Skew X/Y to add more transform functions.
3
Pick a transform-origin point on the 3x3 grid to change where rotation and scaling pivot from.
4
Click Copy to grab the generated transform and transform-origin CSS.

Questions

What order are the transform functions applied in?: This tool writes them in the order translate, rotate, scale, skew, which matches the order they're combined in the transform property — CSS applies transform functions right-to-left in terms of the coordinate system, so changing the order in your stylesheet can change the visual result even with the same values.
What is transform-origin?: It's the pivot point that rotate and scale operate around — the default is the element's center. Changing it to, say, top left makes a rotation swing around that corner instead of spinning in place.
Why use transform instead of changing left/top/width/height?: transform (and opacity) are the two properties browsers can animate on the GPU compositor without triggering layout or paint, so transitions and animations built with transform are smoother and cheaper, especially on mobile.
Can I combine this with a CSS transition?: Yes — paste the generated transform value into a hover or class-toggle state and add `transition: transform 0.2s ease;` on the base rule to animate between states.
Does this tool send my design anywhere?: No — the preview and generated CSS are computed and rendered entirely in your browser.