Transforms

Scale

sz prop	Tailwind class
{ scale: 100 }	scale-100
{ scale: 90 }	scale-90
{ scale: 110 }	scale-110
{ scale: 150 }	scale-150
{ scaleX: 125 }	scale-x-125
{ scaleY: 75 }	scale-y-75
{ scaleZ: 50 }	scale-z-50
{ scale: '3d' }	scale-3d
{ scale: '1.25' }	scale-[1.25]

scale — 75, 100, 125 side by side

75

100

125

Rotate

sz prop	Tailwind class
{ rotate: 0 }	rotate-0
{ rotate: 45 }	rotate-45
{ rotate: 90 }	rotate-90
{ rotate: 180 }	rotate-180
{ rotate: -45 }	-rotate-45
{ rotateX: 45 }	rotate-x-45
{ rotateY: 90 }	rotate-y-90
{ rotateZ: 180 }	rotate-z-180
{ rotate: '3deg' }	rotate-[3deg]

rotate — 0, 45, 90 side by side

0°

45°

90°

click to rotate — steps through 0 → 45 → 90 → 135 → 180

0°

Rotate to 45°

className drives the animation — sz {{ rotate }} compiles each step statically at build time

Translate

sz prop	Tailwind class
{ translate: 4 }	translate-4
{ translate: '1/2' }	translate-1/2
{ translate: '-1/2' }	-translate-1/2
{ translateX: 4 }	translate-x-4
{ translateY: -4 }	-translate-y-4
{ translateZ: 4 }	translate-z-4
{ translateX: '1/2' }	translate-x-1/2
{ translateX: '-1/2' }	-translate-x-1/2
{ translateY: '1/2' }	translate-y-1/2
{ translateY: '-1/2' }	-translate-y-1/2
{ translateX: 'full' }	translate-x-full
{ translate: '3d' }	translate-3d
{ translateX: '10px' }	translate-x-[10px]

{ translateX: 4 } — shifted right by 1rem

origin

+X 4

Skew

sz prop	Tailwind class
{ skewX: 3 }	skew-x-3
{ skewY: 6 }	skew-y-6
{ skewX: -3 }	-skew-x-3

skewX — 0 vs skewX-6

no skew

skewX-6

Transform Origin

sz prop	Tailwind class
{ origin: 'center' }	origin-center
{ origin: 'top' }	origin-top
{ origin: 'top-right' }	origin-top-right
{ origin: 'bottom-left' }	origin-bottom-left
{ origin: 'left' }	origin-left
{ origin: 'right' }	origin-right

Perspective

sz prop	Tailwind class
{ perspective: 'dramatic' }	perspective-dramatic
{ perspective: 'normal' }	perspective-normal
{ perspectiveOrigin: 'center' }	perspective-origin-center

Transform Style

sz prop	Tailwind class
{ transformStyle: '3d' }	transform-3d
{ transformStyle: 'flat' }	transform-flat

{ rotateY, transformStyle: '3d' } — perspective on parent makes depth visible

Front face

full width

rotateY: 0

Turning…

narrowing

rotateY: 45

Edge-on

almost flat

rotateY: 75

Backface Visibility

sz prop	Tailwind class
{ backface: 'visible' }	backface-visible
{ backface: 'hidden' }	backface-hidden

Transform

sz prop	Tailwind class
{ transform: 'none' }	transform-none
{ transform: 'gpu' }	transform-gpu
{ transform: 'cpu' }	transform-cpu

Examples

// Hover scale effect
<img sz={{
  transition: 'transform',
  duration: 300,
  hover: { scale: 105 },
}} />

// Rotate on active
<button sz={{
  transition: 'transform',
  active: { rotate: 3 },
}} />

// Centered absolute overlay
<div sz={{
  absolute: true,
  top: '1/2',
  left: '1/2',
  translateX: '-1/2',
  translateY: '-1/2',
}} />

// Card flip animation
<div sz={{
  relative: true,
  transformStyle: '3d',
  hover: { rotateY: 180 },
}} />