CSS Transforms

Transforms change how an element looks without changing the normal document flow. That is why transforms are used for modern UI effects. ## Common transform types - translate (move) - scale (zoom) - rotate (turn) - skew (tilt) ## Example: hover zoom card HTML: ```html <div class="card">Product Card</div> ``` CSS: ```css .card { width: 240px; padding: 16px; border: 1px solid #ddd; transition: transform 0.2s ease; } .card:hover { transform: scale(1.03); } ``` ## UI imagination When mouse goes over the card, it gently zooms. ## Why transform is preferred over width/height change If you change width/height on hover, the layout can jump. Transform keeps layout stable. ## Graph: stable vs unstable hover ```mermaid flowchart LR A[Change width/height] --> B[Layout shifts] C[Use transform] --> D[Layout stays stable] ``` ## Remember - Use transform for UI effects - Always pair with transition for smoothness