🔄 Scale & Rotation CSS Demonstration

Normal

No transform applied
Box
No transform

Scale 50%

Scaled to 50% size
Box
scale-50

Scale 150%

Scaled to 150% size
Box
scale-150

Scale X 75%

X-axis scaled to 75%
Box
scale-x-75

Scale Y 125%

Y-axis scaled to 125%
Box
scale-y-125

Custom Scale

Custom scale value 1.7
Box
scale-[170]

Rotate 45°

Rotated 45 degrees
Box
rotate-45

Rotate 90°

Rotated 90 degrees
Box
rotate-90

Custom Rotate

Custom rotation 30deg
Box
rotate-[30deg]

Scale + Rotate

Scale 125% and rotate 45°
Box
scale-125 rotate-45

Radians

Rotation using radians
Box
rotate-[1.57rad]

Hover Effect

Hover to see scale effect
Box
hover:scale-110

📝 Transform Utility Reference

Scale utilities: scale-{value}, scale-x-{value}, scale-y-{value}

Named values: 0, 50, 75, 90, 95, 100, 105, 110, 125, 150, 200

Custom values: scale-[{number}] where number is percentage (100 = 1.0)

Rotation utilities: rotate-{degrees}, rotate-x-{degrees}, rotate-y-{degrees}

Named degrees: 0, 1, 2, 3, 6, 12, 45, 90, 180, 270

Custom rotations: rotate-[{value}deg], rotate-[{value}rad], rotate-[{value}turn]