Transform Generator

Combine translate, rotate, scale and skew and instantly see the transform applied to an element.

Settings

Preview

Box

Code


            
            
            

User guide

The transform property applies several transforms in the given order. Order matters: a rotation before a translation differs from after.

  • transform is GPU-performant and ideal for animations.
  • Pair with transition: transform for smooth effects.

FAQ

Does the order of transforms matter?

Yes. transform: rotate() translate() rotates first then translates in the rotated frame, which differs from the reverse order.

Does transform move neighboring elements?

No, transform doesn't affect flow: neighbors aren't pushed, unlike margin.