Transforms

Transforms

Rotate, scale, translate, and skew elements.

Translate

Move an element:

<button class="hover:translate-x-2">...</button>

Rotate

rotate-<n>:

<div class="rotate-45">...</div>
<div class="-rotate-90">...</div>

Any degree value works: rotate-90, rotate-180, rotate-[23deg].

Scale

scale-<n>:

• scale-0, scale-50, scale-75, scale-90, scale-95, scale-100, scale-105, scale-110, scale-125, scale-150.
• Per axis: scale-x-50, scale-y-50.

<button class="transition hover:scale-105">...</button>

Skew

skew-x-<n>, skew-y-<n>:

<div class="skew-x-12">...</div>

Transform origin

Control the point transforms pivot around:

<div class="origin-top-left scale-50">...</div>

Combining transforms

Transforms compose, so stack them:

<div class="translate-x-4 rotate-45 scale-110">...</div>

3D transforms

perspective-, transform-3d, rotate-x-, rotate-y-, rotate-z-, translate-z-, scale-z- enable 3D effects.

TL;DR

• translate-x-, translate-y- move elements.
• rotate-45, scale-105, skew-x-12 modify shape.
• origin-* sets the pivot point.
• Transforms compose and work great with hover.