tailwindcss-transforms

# Tailwind CSS Transforms & Animations v4.1

Complete reference for Transform, Transition, and Animation utilities in Tailwind CSS v4.1.

## Transform Utilities

### Scale
Transform an element by scaling (resizing) it.

```html
<!-- Scale in X, Y, or both -->
<div class="scale-50">50%</div>
<div class="scale-100">100%</div>
<div class="scale-125">125%</div>
<div class="scale-150">150%</div>
<div class="scale-x-50">Scale X only</div>
<div class="scale-y-75">Scale Y only</div>
```

**Responsive**: `sm:scale-125`, `md:scale-150`, `lg:scale-100`
**States**: `hover:scale-110`, `focus:scale-105`, `group-hover:scale-125`

### Rotate
Rotate an element by an angle.

```html
<!-- Rotate by degrees -->
<div class="rotate-0">0°</div>
<div class="rotate-45">45°</div>
<div class="rotate-90">90°</div>
<div class="rotate-180">180°</div>
<div class="-rotate-45">-45°</div>
```

**Responsive**: `sm:rotate-90`, `md:rotate-180`, `lg:rotate-0`
**States**: `hover:rotate-45`, `focus:rotate-90`

### Translate
Move an element along X and Y axes.

```html
<!-- Translate X and Y -->
<div class="translate-x-0">No translation</div>
<div class="translate-x-2">X direction</div>
<div class="translate-y-4">Y direction</div>
<div class="translate-x-6 translate-y-8">Both axes</div>
<div class="-translate-x-2">Negative X</div>
<div class="-translate-y-4">Negative Y</div>
```

**Responsive**: `sm:translate-x-4`, `md:translate-y-8`
**States**: `hover:translate-y-2`, `focus:translate-x-1`

### Skew
Skew an element along X and Y axes.

```html
<!-- Skew transform -->
<div class="skew-x-3">Skew X</div>
<div class="skew-y-6">Skew Y</div>
<div class="skew-x-3 skew-y-6">Both skew</div>
<div class="-skew-x-3">Negative skew</div>
```

**Responsive**: `sm:skew-x-6`, `md:skew-y-3`
**States**: `hover:skew-x-2`, `group-hover:skew-y-4`

### Transform Origin
Set the origin point for transform operations.

```html
<!-- Origin positioning -->
<div class="origin-center">Default center</div>
<div class="origin-top">Top</d