CSS Transform Generator

Translate, rotate, scale, and skew with a live transform preview.

Presets:

Translate X0px

Translate Y0px

Rotate0°

Scale1×

Skew X0°

Skew Y0°

Live preview

Active Transformations: 0Scale Factor: 1×Rotation: 0°CSS Size: 16 B

CSS Code

transform: none;

The CSS transform property

transform repositions an element without disturbing the surrounding layout, which makes it ideal for hover effects and animations. Functions apply in the order you list them, and that order matters — rotating then translating gives a different result than translating then rotating. Values left at their defaults are omitted to keep the output tidy. Drag the sliders and copy the result; it all renders locally in your browser.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Building a translate, rotate, scale and skew combination with a preview.
Getting the transform order right for the effect you want.
Producing a hover transform without trial and error.
Comparing two transform values side by side.
Reproducing a transform a designer specified.

Frequently Asked Questions

Does the order of the functions matter?: Yes, and it is the usual source of surprise. Each function operates on the coordinate space the previous one produced, so `rotate(45deg) translateX(100px)` moves along a rotated axis — diagonally — while `translateX(100px) rotate(45deg)` moves right and then spins in place.
Does a transform affect the surrounding layout?: No. The element is drawn somewhere else but its box keeps its original position and size, so neighbours do not reflow and nothing shifts. That is precisely what makes transforms cheap to animate — and also why a scaled element can overlap the one next to it.
What is transform-origin and when do I change it?: The fixed point everything rotates and scales around, defaulting to the element's centre (50% 50%). Change it whenever the motion should pivot elsewhere — `transform-origin: bottom left` for a menu that grows out of its trigger corner, or `0 0` to make scaling behave like a top-left anchored zoom.
Why does skew look like it also rotated my element?: Because a skew tilts one axis while leaving the other alone, and the eye reads the result as a rotation plus a stretch. Skewing both X and Y by the same amount comes closest to a pure rotation, which is why the diamond preset pairs −15° on each with a 45° rotate.
Why is my text blurry after scaling?: Because a scaled element is often rasterised at its original size and then resampled, so glyph edges land between pixels. Scaling by a whole number helps, as does `will-change: transform` before the animation starts — but text scaled to a fractional size never matches text set at that size.

Common errors and gotchas

Getting the order wrong, since transforms apply right to left and are not commutative.
Forgetting `transform-origin`, which changes rotation and scale completely.
Scaling an element and expecting its layout box to change, which it does not.
Using transform on an inline element, where it has no effect.
Animating a transform alongside a layout property, which negates the performance benefit.