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