Transforms

Apply 2D and 3D transforms as composable utilities that are cheap for the browser to animate.

4 min read Level 2/5 #tailwind#transforms#motion

What you'll learn

Use scale, rotate, translate, and skew
Set the transform origin
Use the v4 3D transforms with perspective and rotate-x/y

Transforms move, scale, and rotate elements without affecting layout. They run on the compositor, so they are ideal for the smooth motion you reach for with transition and animate.

2D Transforms

Each utility maps to a transform function and they compose freely:

<button class="transition-transform
               hover:scale-105 active:scale-95">
  Press me
</button>

<div class="rotate-3 -translate-y-1 skew-x-2">
  Tilted and lifted card
</div>

hover:scale-105 active:scale-95 gives the satisfying grow-on-hover, shrink-on-press feel. Negative values use a leading dash, as in -translate-y-1.

Transform Origin

By default transforms pivot around the element’s center. origin-* changes the anchor point:

<div class="origin-top-left rotate-6">Rotates from its top-left corner</div>
<div class="origin-bottom scale-y-110">Grows downward from the bottom</div>

3D Transforms

Tailwind v4 ships first-class 3D utilities. Establish a 3D context with transform-3d and a perspective-*, then rotate and translate on the Z axis:

<div class="perspective-distant">
  <div class="transform-3d rotate-x-12 rotate-y-6 translate-z-4
              transition-transform hover:rotate-y-0">
    Card with depth
  </div>
</div>

Because all of these resolve to the GPU-friendly transform property, they animate at 60fps even on modest devices — far cheaper than animating layout properties like width or margin.

Scroll Snap & Behavior →