CSS Transform Generator

Move, rotate, scale, and skew an element in 2D, or tilt it in 3D with perspective, and copy the transform CSS. Change the transform origin to see how it pivots.

Updated
Runs in your browser. Your data is not uploaded.
Preview
CSS

How to use the CSS Transform Generator

  1. Move the sliders for translateX, translateY, rotate, scaleX, scaleY, skewX, and skewY.
  2. For 3D, set rotateX or rotateY and a perspective above 0. Pick the transform-origin.
  3. Press Copy CSS.

How it works

  • Transform functions are applied from right to left, so their order matters. The output uses the order perspective, translate, rotate, rotateX/Y, scale, skew.
  • perspective() inside transform sets how strong the 3D effect is: smaller values look more dramatic.
  • transform-origin is the pivot point. Rotating around top left swings the element like a door.
  • Transforms don't change layout: other elements stay where they were, as if the element hadn't moved.

Examples

  • Tilt preset: transform: rotate(15deg);
  • Card flip preset: transform: perspective(800px) rotateY(35deg);
  • Zoom preset: transform: scale(1.3);, a common hover effect together with transition: transform .2s.

Limitations

  • Only one combined transform is generated. Separate translate, rotate, and scale properties also exist in modern CSS and can be animated independently.
  • Keyframe animations are not generated; add your own transition or @keyframes.

Frequently asked questions

Does the order of transform functions matter?

Yes. Rotating then moving sends the element in the rotated direction; moving then rotating doesn't. Test both in the preview.

Why doesn't my 3D rotation look 3D?

It needs perspective. Set perspective above 0 here, or add perspective to the parent element.

Are transforms good for animation?

Yes. transform and opacity can be animated without re-laying out the page, so they stay smooth.

Is anything uploaded?

No. The CSS is built in your browser.

Often used together with the CSS Transform Generator.