Transform

Summary

`transform` lets you rotate, scale, skew and translate elements without affecting document flow — the basis of most modern hover/click micro-interactions. Because transforms generally operate without changing surrounding layout, they are useful for interaction feedback and visual movement with relatively low layout overhead.

• 1Build a card that scales up slightly on hover using `transform: scale()`. Keep the first version small, then add one improvement after the core behavior works.
• 2Practice combining `translate`, `rotate` and `scale` in one transform. Test it with at least one normal case and one edge case so you can explain the behavior confidently.
• 3Learn `transform-origin` and how it changes rotation/scale behavior.