Transforms

Transform origin

Set the origin point for transforms with .origin-{position}.

Rotate

Rotate elements with .rotate-{deg}. Add -reverse for negative rotation. Axis-specific variants use .rotate-{x|y|z}-{deg}.

<div class="rotate-45">Rotated 45°</div>
<div class="rotate-90">Rotated 90°</div>
<div class="rotate-45-reverse">Rotated -45°</div>

<!-- Axis-specific -->
<div class="rotate-x-45">X-axis 45°</div>
<div class="rotate-y-90">Y-axis 90°</div>

Scale

Scale elements with .scale-{value}. Axis-specific variants: .scale-x-{value}, .scale-y-{value}, .scale-z-{value}.

<div class="scale-50">50% size</div>
<div class="scale-100">Normal size</div>
<div class="scale-150">150% size</div>
<div class="hover:scale-110">Scale on hover</div>

Skew

Skew elements with .skew-{deg}. Axis-specific: .skew-x-{deg}, .skew-y-{deg}.

<div class="skew-3">Skewed 3°</div>
<div class="skew-x-6">X-axis skew 6°</div>

Translate

Move elements with directional presets or percentage-based values.

Directional presets

Percentage values

<div class="translate-x-25">Move right 25%</div>
<div class="translate-y-50">Move down 50%</div>
<div class="translate-x--50">Move left 50%</div>

Transitions

Control CSS transition properties, durations, and timing functions with utility classes.

Transition property

<div class="transition-all transition-300 ease-in-out hover:scale-110">
  Smooth scale on hover
</div>

Duration

Timing function

Pseudo-state support. All transform and transition utilities support hover:, focus:, and active: prefixes - combine them for interactive effects like hover:rotate-45 or hover:scale-110.