2D transforms move, rotate, scale, and skew elements on the x/y plane without triggering normal document reflow.
Common transform functions
translate()scale()rotate()skew()
Pitfall
Large scale transforms on text can blur rendering. Use subtle values and test on low-density displays.
Important interview questions and answers
- Q: Why animate transform instead of top/left?
A: Transforms are usually more compositor-friendly and avoid layout thrash. - Q: What does transform origin change?
A: The pivot point for rotate/scale behavior. - Q: Can transformed element affect flow position of siblings?
A: Visual position changes without normal flow relocation.
Practice: Change one property in the playground and observe cascade + layout in DevTools.