Skip to content
Convertto

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.

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

Frequently asked questions

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.

How to use the css transform generator

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

Embed this tool

Put the working css transform generator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

CSS Animation GeneratorGenerate keyframe animations — fade, slide, bounce, pulse, spin and shake.CSS Hover Effect GeneratorGenerate a hover effect that animates cleanly, with the reduced-motion guard included.CSS Loader GeneratorBuild a spinner, dots, bars or a pulse from pure CSS and copy the keyframes.Cubic Bezier Easing GeneratorBuild custom CSS easing curves and see the motion they produce.Blob Shape GeneratorDesign organic SVG backgrounds: four interpolation styles, gradients, layers and any canvas size.CSS Border Radius GeneratorDrag eight handles to shape every corner: elliptical radii, inverted corners and squircles.

Last updated

More css generators