3D Transforms in CSS
From the CSS Animations cheat sheet · CSS Transform · verified Jul 2026
3D Transforms
Create depth and perspective with 3D transformations
css
/* Enable 3D */
transform-style: preserve-3d;
perspective: 1000px;
/* 3D Transforms */
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: translateZ(50px);
transform: rotate3d(1, 1, 0, 45deg);💡 Set perspective on parent container
⚡ preserve-3d maintains 3D space for children
📌 backface-visibility for card flip effects
⚠️ 3D transforms can be GPU-intensive