CSS Transform Generator

About CSS transform generator

Set translate, rotate, scale and skew values with sliders and watch an 80 pixel square move on a dotted grid. The tool writes one transform declaration in a fixed order and drops any function left at its identity value. It is aimed at developers who keep forgetting which axis is which.

How to use it

1. Drag Translate X and Translate Y anywhere from -200 to 200 pixels.
2. Set Rotate between -180 and 180 degrees.
3. Adjust Scale X and Scale Y from 0 to 3 in steps of 0.05.
4. Add Skew X and Skew Y between -45 and 45 degrees if you want a slant.
5. Press Reset to return to none, then use Copy CSS on the Generated CSS block.

Nudged, tilted and enlarged

Translate X 40, Rotate 15, Scale X 1.2, Scale Y 1.2

transform: translate(40px, 0px) rotate(15deg) scale(1.2, 1.2);

When to use it

• Working out the transform for a card that tilts slightly on hover.
• Checking how far an element can be shrunk or enlarged before its text becomes unreadable.
• Slanting a badge or banner with skew to fake a parallelogram.
• Learning how the order of translate and rotate changes where a shape ends up.

Questions about CSS transform generator

In what order does the tool write the functions?

Translate, then rotate, then scale, then skewX, then skewY. Because translate comes first, the element moves along the page's axes and turns in place. Reversing them in your CSS would move it along rotated axes.

Why is the scale minimum 0?

A scale of 0 collapses the element to nothing. It is included so you can see what happens, but for practical layouts you will normally stay between 0.5 and 2.

Does it set transform-origin?

No. The preview rotates around its center, which is the CSS default, and the generated output contains only the transform line.

Are 3D transforms supported?

No. Only flat two-dimensional functions are generated, so there is no rotateX, translateZ or perspective.

What does the tool print when nothing is changed?

It prints transform: none; so the line you paste is always valid CSS, even when every slider sits at its starting value.

Related tools

• CSS animation builderBuild @keyframes animations with a keyframe timeline, timing controls, and live play button
• Color shades generatorGenerate a full 50–950 shade scale from any color — export as CSS variables or Tailwind config
• Typography scale generatorGenerate a modular type scale from base size and ratio — exports CSS custom properties
• Spacing scale generatorBuild a design-token spacing scale from a base unit — exports CSS custom properties
• Gradient generatorBuild CSS linear, radial, and conic gradients with custom stops, angles, and live preview
• CSS shadow generatorCraft box-shadow and text-shadow CSS with multi-layer support, presets, and live preview