Transform
A CSS property that moves, scales, rotates, or skews an element without affecting the document flow.
Plain English
Transform lets you move and resize things visually without disturbing the layout. A button that scales up 2% on hover feels interactive without the page reflowing. A loading spinner that rotates continuously. A modal that slides in from the bottom. Transform changes how things look without changing where they sit in the document — making it the go-to tool for animations and interactive feedback that do not break the surrounding layout.
Technical
The transform property accepts functions: translate(x, y), scale(x, y), rotate(deg), skew(x, y), and their 3D equivalents. Multiple transforms chain left-to-right. transform: translate(-50%, -50%) is the classic centering trick. Transform creates a new stacking context and positions the element on the GPU compositor layer — transitions on transform are GPU-accelerated and significantly cheaper than transitioning top/left/width/height. Use transform over position adjustments for any animated movement.
Live Demo
Baseline
No transform
Scale
Hover scale
Rotate
Playful tilt
Lift
Lift effect
Skew
Dynamic angle
Transform does not affect layout — other elements don't shift. Use translate for hover lift.
Usage
✓ Good usage
Add transform: translateY(-2px) on card hover with a matching shadow upgrade — the subtle lift communicates interactivity through physical metaphor.
✗ Bad usage
Animating top or left CSS properties for movement — these trigger layout recalculation and cause jank; use transform: translate() instead.
Recommended values
- Hover lift: transform: translateY(-2px) with transition
- Button press: transform: scale(0.97) on :active
- Card hover: transform: scale(1.02) for subtle enlarge
- Icon spin: transform: rotate(180deg) for toggle icons (chevron, plus/minus)
- Centring trick: transform: translate(-50%, -50%) on absolutely positioned elements
Common mistakes
- Animating top/left instead of transform — much more expensive, causes layout recalculation.
- transform: rotate() on text without checking legibility at all angles.
- Forgetting that transform creates a new stacking context — may affect z-index behaviour.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use transform: translateY(-2px) on card hover and transform: scale(0.97) on button :active press. All interactive movement uses transform, never top/left position changes. Pair all transforms with transition: transform 150ms ease.