CSS Transform Generator

How to use it

1. Set translate X and Y in pixels to move the box.
2. Set rotate in degrees to turn it around the origin.
3. Set scale X and Y to stretch the box. Values below 1 shrink it, values above 1 enlarge it.
4. Set skew X and Y in degrees to slant it.
5. Set the transform origin to move the pivot, such as left top or 20% 80%. One value is allowed and the second defaults to center.
6. Watch the square update on every keystroke, then copy the CSS.

Common use cases

• Hover and press states - lift a card with a small translate, or tilt a button on hover.
• Badge and ribbon angles - rotate a corner label into place.
• Icon animations - scale an icon on focus without changing layout.
• Skewed section edges - slant a decorative band with skewY.
• Pivot experiments - see how the same rotation reads differently from each origin.

Why it stays private

The transform string is built in this page from your numbers and applied to the preview element. Nothing is uploaded, and the tool works offline.

FAQ

Q: What order are the functions applied in? A: CSS multiplies the functions left to right, so the leftmost function acts last. The tool writes them in the order translate, rotate, scale, skew, which matches the controls. If you need a different composition, reorder the pasted CSS by hand.

Q: What values can transform-origin take? A: One or two values. Each may be a keyword (left, center, right, top, bottom), a percentage or a length. With one value the second defaults to center, and an empty field falls back to 50% 50%.

Q: Is 3D supported? A: No. The tool covers 2D transforms only: translate, rotate, scale and skew. Perspective and 3D rotations would need extra functions added by hand.

Q: Does the preview match my page? A: The preview square uses the same transform and origin, so the motion matches. The square is 96 pixels; applying the CSS to a differently sized element keeps the values but scales the visual result.