Question 1

What are CSS transforms?

Accepted Answer

CSS transforms let you modify elements in 2D or 3D space. You can rotate, scale, skew, and translate (move) elements. Transforms don't affect document flow - other elements stay in their original positions.

Question 2

What's the order of transforms?

Accepted Answer

Transforms are applied right to left. 'rotate(45deg) translateX(100px)' first translates, then rotates. In Tailwind, the order of classes doesn't matter - they're combined into one transform property.

Question 3

What is transform-origin?

Accepted Answer

transform-origin sets the point around which transforms are applied. Default is center. Use 'origin-top-left', 'origin-center', etc. in Tailwind. It's especially important for rotation and scaling.

Question 4

Are transforms performant?

Accepted Answer

Yes! Transforms are GPU-accelerated and don't trigger layout recalculations. They're ideal for animations. Use 'will-change: transform' for complex animations to hint at optimization.

Transform Playground

You might also like

Animation Builder

Flexbox Playground