# CSS Transform Generator — Translate, Rotate, Scale & Skew

> Build a 2D or 3D transform visually and copy the CSS, with the transform origin handled properly.

CSS transforms move, rotate, scale and skew an element without affecting layout — the space it originally occupied stays reserved, which is why transforms are cheap to animate. Functions apply right to left, so `translate(50px) rotate(45deg)` rotates first and then moves along the unrotated axis.

**URL:** https://convertto.tech/t/css-transform-generator
**Category:** CSS Generators (https://convertto.tech/c/css-generators)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

- **Privacy:** Runs entirely in your browser — nothing is uploaded
- **Cost:** Free, unlimited, no sign-up

## How to use

1. Set the translate x.
2. Set the translate y.
3. Turn "Scale both axes together" on or off as needed.
4. Set the scale.
5. Set the scale x.
6. Set the scale y.
7. Set the rotate.
8. Set the skew x.
9. Set the skew y.
10. Set the rotate x (3d).
11. Set the rotate y (3d).
12. Set the perspective.
13. Choose the transform origin.
14. The result appears immediately — copy or download it.

## FAQ

### Why does changing the order of transform functions change the result?

Each function multiplies the coordinate system rather than acting on the original. Rotating then translating moves the element along its new, rotated axes; translating then rotating spins it around a point it has already moved to. The functions read right to left, which surprises almost everyone the first time.

### Why is my rotateX doing nothing?

3D rotations need a perspective, otherwise the element is projected flat and an X rotation only squashes it. Either add `perspective()` as the first function in the transform, or set the `perspective` property on the parent — the latter is what you want when several children should share one vanishing point.

### Should I animate transform or top and left?

Transform, always. It runs on the compositor without triggering layout or paint, so it stays at 60fps; animating top or left forces a layout recalculation on every frame and stutters as soon as the page has any complexity.

## Related tools

- [CSS Animation Generator](https://convertto.tech/t/css-animation-generator): Generate keyframe animations — fade, slide, bounce, pulse, spin and shake.
- [CSS Hover Effect Generator](https://convertto.tech/t/css-hover-effects-generator): Generate a hover effect that animates cleanly, with the reduced-motion guard included.
- [CSS Loader Generator](https://convertto.tech/t/css-loader-generator): Build a spinner, dots, bars or a pulse from pure CSS and copy the keyframes.
- [Cubic Bezier Easing Generator](https://convertto.tech/t/cubic-bezier-generator): Build custom CSS easing curves and see the motion they produce.
- [Blob Shape Generator](https://convertto.tech/t/blob-shape-generator): Design organic SVG backgrounds: four interpolation styles, gradients, layers and any canvas size.
- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.
- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [CSS Button Generator](https://convertto.tech/t/css-button-generator): Design a button and copy the CSS, including the hover, active and focus-visible states.