Yes. Transform functions apply left to right, so translate then rotate differs from rotate then translate. This tool uses a sensible fixed order.

Does transform affect layout?

No. Transforms are visual only and do not push other elements around, which makes them great for animation.

Yes. Put the transform on a transition or keyframe to animate between states smoothly.

CSS & Design

CSS Transform Generator

Build a CSS transform with rotate, scale, translate and skew.

Free foreverRuns in your browserNo sign-up

Box

Rotate0deg

Scale100%

Translate X0px

Translate Y0px

Skew X0deg

Skew Y0deg

transform: translate(0px, 0px) rotate(0deg) scale(1) skew(0deg, 0deg);

The CSS transform property moves, rotates, scales and skews elements without affecting the surrounding layout.

This tool gives you sliders for rotate, scale, translate and skew with a live preview, then outputs the combined transform CSS.

It runs in your browser.

Tilt and grow

Output: transform: rotate(-6deg) scale(1.1);

Combining rotate and scale creates a playful hover effect.

Does order matter?: Yes. Transform functions apply left to right, so translate then rotate differs from rotate then translate. This tool uses a sensible fixed order.
Does transform affect layout?: No. Transforms are visual only and do not push other elements around, which makes them great for animation.
Can I animate this?: Yes. Put the transform on a transition or keyframe to animate between states smoothly.