3D Transform
CSS 3D transforms that move, rotate, and position elements in three-dimensional space using perspective, rotateX/Y/Z, translateZ, and transform-style: preserve-3d.
Plain English
Most CSS effects live on a flat 2D plane — left, right, up, down. 3D transforms add a third dimension: depth. You can tilt a card toward you (rotateX), spin it like a coin (rotateY), or push it back into the screen (translateZ). The result is effects like card flips that reveal a back face, interactive tilt on hover that follows the mouse, and stacked 3D scenes where elements sit at different depths. The key to making 3D work is the perspective property on the parent element — it controls how extreme the depth looks, much like adjusting the focal length on a camera. Without perspective, 3D transforms look flat and wrong.
Technical
Apply perspective to the parent container, not the element itself: `.scene { perspective: 800px; }`. On the element, use `transform-style: preserve-3d` so child elements participate in the 3D context. Card flip: wrap in `.card-inner { transform-style: preserve-3d; transition: transform 0.6s; }` with `.card-front, .card-back { backface-visibility: hidden; position: absolute; }` and `.card-back { transform: rotateY(180deg); }`. Flip on hover: `.scene:hover .card-inner { transform: rotateY(180deg); }`. Mouse-tracking tilt via JS: read `mousemove` event offsets, calculate rotation from center, apply `rotateX` and `rotateY` with `requestAnimationFrame`. GPU-accelerated — `will-change: transform` prevents compositing layer thrashing. Always provide `@media (prefers-reduced-motion: reduce)` override that removes 3D rotation, keeping only flat styles.
Live Demo
3D Card Flip
Click the card to flip it. Uses CSS perspective, transform-style: preserve-3d, and rotateY.
/* Parent wrapper */
perspective: 800px;
/* Card container */
transform-style: preserve-3d;
transition: transform 600ms;
/* Flipped state */
transform: rotateY(180deg);
/* Each face */
backface-visibility: hidden;
/* Back face: */
transform: rotateY(180deg);
3D transforms add depth and delight — use sparingly for reveal moments, not navigation.
Usage
✓ Good usage
A pricing card that flips on hover to reveal a "What you get" breakdown on the back face — implemented with rotateY(180deg), backface-visibility: hidden on front and back, and a 0.5s ease transition.
✗ Bad usage
Applying random rotateX and rotateZ values to hero text and buttons site-wide to seem dynamic — 3D transforms without a clear spatial metaphor create confusion and visual noise, not depth.
Recommended values
- perspective (parent): 600px–1200px (lower = more dramatic)
- Card flip rotation: rotateY(180deg)
- Tilt hover: ±10–20deg on rotateX/Y for subtle depth
- translateZ for layering: 20–80px increments
- Transition duration: 0.4s–0.7s for flips, cubic-bezier(0.23, 1, 0.32, 1)
- backface-visibility: hidden on both card faces
Common mistakes
- Forgetting perspective on the parent — without it, rotateX/Y looks like a flat 2D skew with no depth.
- Omitting transform-style: preserve-3d on intermediate wrapper elements — child faces collapse back to 2D.
- No backface-visibility: hidden on card faces — both faces show through each other during the flip animation.
- Skipping prefers-reduced-motion — rotating 3D scenes are among the most likely triggers for vestibular discomfort.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Create a card flip component. Parent `.scene` has `perspective: 800px`. Inner `.card` has `transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.23,1,0.32,1)`. Front and back faces: `backface-visibility: hidden; position: absolute; inset: 0`. Back face: `transform: rotateY(180deg)`. On hover/focus: `.scene:hover .card { transform: rotateY(180deg) }`. Respect `prefers-reduced-motion` by disabling the transition and showing back face directly.