Transforms

Move, scale and rotate with transform utilities.

Syntaxclass="hover:scale-110 rotate-3 transition"

Transform utilities change an element's shape or position without affecting layout.

scale-110 — grow to 110%.
rotate-6 — rotate 6 degrees.
translate-x-2 — shift right.

Pair with hover: and transition for interactive motion.

Example

Loading editor…

Press Run to see the result.

When to use it

A developer scales a card up slightly on hover using hover:scale-105 to make it feel interactive and elevated.
A loading icon rotates continuously using rotate-0 and an animation utility to signal background activity.
A call-to-action chevron icon is flipped 180 degrees using rotate-180 when an accordion section is expanded.

More examples

Scale on hover

hover:scale-105 grows the card to 105% of its size on hover; transition-transform provides the smooth scaling animation.

<div
  class="bg-white border rounded-lg p-6
         hover:scale-105
         transition-transform duration-200"
>
  <h3 class="font-semibold">Product Card</h3>
</div>

Rotate arrow indicator

rotate-180 flips the chevron icon to point upward when the section is expanded, toggled by adding or removing the class with JavaScript.

<button class="flex items-center gap-2" aria-expanded="true">
  Details
  <svg class="w-4 h-4 rotate-180 transition-transform duration-200"
       fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path d="M19 9l-7 7-7-7"/>
  </svg>
</button>

Translate on hover

hover:translate-x-1 nudges the link and its arrow 4px to the right on hover, giving a directional motion cue for the link destination.

<a
  href="/learn"
  class="inline-flex items-center gap-1 text-indigo-600
         hover:translate-x-1
         transition-transform duration-150"
>
  Learn more
  <span class="text-lg">&rarr;</span>
</a>

Discussion

Be the first to comment on this lesson.