Part 46: Transforms: Scale, Rotate, Translate & Skew

Transforms alter an element's coordinate space without affecting neighboring elements.

1. Scale (scale-*)

• scale-95: Shrinks to 95% (great for click button feedback).
• scale-105: Expands to 105% (great for card hover effects).
• scale-110: Expands to 110%.

<div class="overflow-hidden rounded-2xl">
  <img src="/photo.jpg" class="hover:scale-110 transition-transform duration-500 cursor-pointer" />
</div>

2. Translate (translate-x-*, translate-y-*)

Move elements along the X or Y axis: - -translate-y-1: Subtle 4px lift on card hover. - translate-x-full: Slides an element off-screen (drawers).

<div class="hover:-translate-y-1.5 transition-transform duration-200 p-6 bg-white rounded-xl shadow border">
  Card lifts upward on hover!
</div>

3. Rotate (rotate-*)

• rotate-45: 45 degrees.
• rotate-90: 90 degrees.
• rotate-180: Flips upside down (great for accordion chevron arrows).

<svg class="size-5 transition-transform duration-200 group-open:rotate-180"><!-- Chevron --></svg>

Key Takeaways

• Use scale-105 and -translate-y-1 for engaging hover states.
• Rotate icons using rotate-180 for expandable accordions.

In Part 47, we will examine Transform Origin & 3D Perspective Concepts!