Quick reference for scale, rotate, translate, skew, and origin utilities.
| Class | Example | Description |
|---|
scale-{value} | scale-150 | Scale X and Y to 150% |
scale-x-{value} | scale-x-75 | Scale X axis to 75% |
scale-y-{value} | scale-y-125 | Scale Y axis to 125% |
scale-[value] | scale-[1.35] | Arbitrary scale value |
Available values: 0, 50, 75, 90, 95, 100, 105, 110, 125, 150, 200
| Class | Example | Description |
|---|
rotate-{value} | rotate-45 | Rotate clockwise |
rotate-{negative} | rotate-[-45] | Rotate counterclockwise |
rotate-[value] | rotate-[33deg] | Arbitrary angle |
| Class | Example | Description |
|---|
translate-x-{value} | translate-x-4 | Move horizontally |
translate-y-{value} | translate-y-6 | Move vertically |
translate-x-{fraction} | translate-x-1/2 | Move by width fraction |
translate-y-{fraction} | translate-y-1/4 | Move by height fraction |
translate-x-[value] | translate-x-[25px] | Arbitrary X offset |
translate-y-[value] | translate-y-[-15px] | Arbitrary Y offset |
| Class | Example | Description |
|---|
skew-x-{value} | skew-x-12 | Skew horizontally |
skew-y-{value} | skew-y-6 | Skew vertically |
skew-x-[value] | skew-x-[17deg] | Arbitrary X skew |
skew-y-[value] | skew-y-[-8deg] | Arbitrary Y skew |
| Class | Example | Description |
|---|
origin-{position} | origin-top-left | Set origin by preset |
origin-[value] | origin-[10px_20px] | Set arbitrary origin |
Available origins: center, top, top-right, right, bottom-right, bottom, bottom-left, left, top-left
Container().className('scale-125 rotate-45 translate-x-4')
Container().className('skew-x-12 origin-bottom-left')
