All Patterns

Transform Image Test

Transform Image Component Props

PropWhat it doesExample
imageSrcImage URLhttps://example.com/image.jpg
imageAltAlt text for accessibilityProduct photo
translateXShifts image horizontally10%, -20px, 2rem
translateYShifts image vertically10%, -20px, 2rem
scaleResize (1 = normal, 1.5 = 150%)0.8, 1, 1.2
rotate2D rotation (flat spin)15deg, -45deg, 180deg
rotateX3D tilt forward/back20deg, -30deg
rotateY3D tilt left/right15deg, -25deg
skewXSlant horizontally10deg, -5deg
skewYSlant vertically10deg, -5deg

Tip: Combine multiple props for complex effects. The wrapper has perspective: 1000px for 3D transforms.