iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Transforms

By · Reviewed & last updated · Part of Tailwind CSS Tutorial

Tailwind transforms cover translate, scale, rotate, skew, and the modern 3D transforms. Combined with transition utilities they handle most state-driven motion: hover lifts, pressed states, slide-ins, parallax. Build them out of single-purpose utilities so each interaction stays readable.

Translate, scale, rotate, 3D, and origin

EXAMPLE
<!-- 1) Translate — slide an element by px or % of its size -->
<div class='translate-x-2 -translate-y-1'>shift</div>
<div class='translate-x-[40%]'>arbitrary translate</div>

<!-- 2) Scale — for press / hover feedback -->
<button class='transition-transform duration-150 hover:scale-105 active:scale-95
                px-3 py-1.5 rounded bg-blue-600 text-white'>
  Save
</button>

<!-- 3) Rotate — single axis -->
<div class='rotate-3'>tilted card</div>
<svg class='animate-spin'><circle .../></svg>     <!-- 360 / 1s -->

<!-- 4) Origin — where the transform pivots -->
<div class='origin-top-left rotate-6'>rotates around top-left corner</div>

<!-- 5) Skew -->
<div class='skew-x-3 -skew-y-1'>skewed nav lozenge</div>

<!-- 6) Group hover — child animates when parent is hovered -->
<a href='#' class='group inline-flex items-center gap-1'>
  Read more
  <span class='inline-block transition-transform duration-200 group-hover:translate-x-1'>→</span>
</a>

<!-- 7) 3D transforms (Tailwind v3.4+) — perspective + preserve-3d -->
<div class='perspective-[1000px]'>
  <div class='transform-gpu transition-transform duration-500 preserve-3d
              hover:rotate-y-180'>
    <div class='backface-hidden'>Front</div>
    <div class='absolute inset-0 backface-hidden rotate-y-180'>Back</div>
  </div>
</div>

<!-- 8) Composable interactions — translate + rotate at once -->
<div class='transition duration-300 will-change-transform
            hover:-translate-y-1 hover:rotate-1'>
  Card lift on hover
</div>

<!-- 9) Parallax / slide-in on visibility (Intersection Observer drives a class) -->
<div class='translate-y-4 opacity-0 transition duration-500
            data-[visible=true]:translate-y-0 data-[visible=true]:opacity-100'>
  Content
</div>

<!-- 10) Respect 'prefers-reduced-motion' -->
<div class='motion-safe:hover:scale-105 motion-reduce:hover:bg-slate-100'>
  Subtle hover when motion is allowed; flat hover otherwise
</div>

<!-- 11) GPU compositing — animate transform + opacity only -->
<!-- Avoid animating width/height/margin/top/left for hot paths.
     Transform changes are GPU-composited; layout changes are not. -->

<!-- 12) Arbitrary 'transform' for one-offs -->
<div class='[transform:perspective(800px)_rotateY(-15deg)_rotateX(8deg)]
            transition duration-500 hover:[transform:none]'>
  Tilted hero card
</div>

Why it matters

Animate `transform` and `opacity`, nothing else, in any hot path. Browsers can composite those on the GPU without re-doing layout or paint, which keeps frame budgets healthy. The moment you reach for `width`, `height`, `margin`, or positional props in a transition, expect mid-tier mobile devices to drop frames.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<div class="transform rotate-3 hover:scale-105">…</div>
Try it Yourself »

Discussion

Loading…