Transforms: Move, Scale, Rotate
Learn how transform lets you move and reshape elements visually without changing the document flow.
transform changes how an element is drawn
The transform property changes an element's visual appearance after the browser has already laid it out. That means you can move, rotate, or scale an element without making the rest of the page recalculate around it.
This is why transforms are so common in animation. If a button grows slightly on hover, you usually want it to look larger without pushing its neighbors away. If a badge rotates, you want it to spin in place, not change the entire layout. Transform gives you exactly that kind of visual-only movement.
Transforms usually perform better than animating layout properties like top, left, width, or height. They often avoid expensive layout recalculation.