CSS Transform Generator

What it does

The CSS Transform Generator combines translate, rotate, scale and skew values into a single ready-to-paste transform: declaration. Adjust the sliders and number fields and the generated CSS updates instantly — no need to hand-write the function syntax or remember the order CSS expects.

The transform functions

A CSS transform declaration is a space-separated list of functions, each changing the element in a different way:

• translate(x, y) — moves the element horizontally and vertically, in pixels. Positive X moves right, positive Y moves down.
• rotate(deg) — spins the element clockwise around its origin (the center, by default). Negative values rotate counter-clockwise.
• scale(x, y) — resizes the element along each axis. 1 is the original size, 2 doubles it, 0.5 halves it, and a negative value flips the element along that axis.
• skew(x, y) — slants the element along each axis, in degrees, producing a parallelogram-like distortion often used for stylized headings or card effects.

Function order matters

Browsers apply transform functions in the order they're written, each one operating on the coordinate system left behind by the previous function. This tool always writes them in a fixed order — translate, rotate, scale, skew — which is the most predictable order for combining offset, rotation and sizing without one function twisting another's effect. If you need a different composition order for a specific effect, reorder the functions manually after copying the CSS.

To keep the output clean, a function is only included when it actually changes something: translate(0px, 0px), rotate(0deg), scale(1, 1) and skew(0deg, 0deg) are all no-ops, so they're omitted. If every value is at its default, the tool outputs transform: none;.

How to use it

1. Set Translate X and Translate Y to move the element, in pixels.
2. Drag Rotate to spin it, in degrees (-360 to 360).
3. Set Scale X and Scale Y to resize it — 1 keeps the original size.
4. Drag Skew X and Skew Y to slant it, in degrees.
5. Copy the generated transform declaration from the code output and paste it into your stylesheet.

FAQ

Why is scale a plain number instead of a percentage? CSS's scale() function takes a unitless multiplier, not a percentage — 1.5 means 150% of the original size, 0.5 means 50%. Matching the raw CSS syntax means you can paste the output directly without conversion.

Can I animate a transform built with this tool? Yes — transform is a common target for CSS transition/animation properties. Add a transition: transform 0.3s ease; rule alongside it (on the base or :hover state) to animate between values.

Does the order of translate/rotate/scale/skew change the visual result? Yes. Because each function operates on the coordinate system left by the one before it, translate() then rotate() produces a different result than rotate() then translate(). This tool uses a fixed, predictable order; edit the copied CSS by hand if you need a different composition.

Does this tool store or upload anything? No. All calculations run locally in your browser — your values never leave your device.