CSS transform generator — move, rotate, scale and skew an element

How to use the CSS transform generator

1. Drag translateX and translateY to move the box, up to 200 px each way.
2. Set rotate (−360° to 360°), scaleX and scaleY (0 to 3), and skewX and skewY (−60° to 60°).
3. Pick a transform-origin if the box should turn or grow from a corner or edge instead of its centre.
4. Compare the coloured box with the dashed outline of its original position, then copy the CSS.

What it does and when to use it

transform changes how an element is drawn without changing the page layout. Typical uses are a card that grows slightly on hover, an icon turned 180° to show an open menu, a badge tilted a few degrees for a playful look, or a skewed background stripe behind a heading.

Because transforms do not trigger layout, they are the usual choice for movement. To animate a transform on hover, add the CSS transition generator. For full 3D tilts with depth, use the 3D perspective generator, and for looping motion the animation generator.

How it works

The tool checks each slider against its “do nothing” value: 0 for moves, rotation and skew, and 1 for scale. Only changed values are written, in a fixed order:

transform: translate(…) rotate(…) scale(…) skew(…);

Equal scaleX and scaleY collapse to one number, so 1.1 and 1.1 become scale(1.1). A transform-origin line is added only when you pick something other than centre. If every slider is neutral, the output is transform: none;. MDN lists both transform and transform-origin as Baseline widely available since September 2015.

Worked examples

The default hover-style tilt. rotate 15°, scale 1.1 on both axes: transform: rotate(15deg) scale(1.1);

Turn a box from its corner. rotate −90°, scale back to 1, origin top left:

transform: rotate(-90deg);
transform-origin: top left;

The box swings up and to the left around its top-left corner instead of spinning on the spot.

A slanted stripe. Only skewX at −12°: transform: skewX(-12deg); Put this on a coloured background element and the reverse, skewX(12deg), on the text inside to keep the words upright.

Limits and tips

• 2D only. For rotateX, rotateY and depth, use the perspective generator.
• Scaling an image above 1 can make it look soft, because its pixels are stretched. Use an image at least as large as its biggest scaled size.
• Rotated text is harder to read. Keep angles small for anything people need to read, and never rotate form fields.
• If you animate transforms, respect users who ask for less motion with a prefers-reduced-motion media query.