CSS 3D transforms enable 3D spatial manipulations—rotating elements along X, Y, and Z axes—to create 3D card flips, depth illusions, and realistic perspective transforms.
3D transforms require a parent perspective property to simulate 3D viewing depth:
/* 1. Parent Perspective Container */
.scene {
perspective: 1000px; /* Simulated viewing distance to 3D scene */
}
/* 2. Child 3D Transformed Element */
.card-3d {
transform: rotateY(180deg); /* Rotate 180 degrees around vertical Y axis */
transform: rotateX(45deg); /* Rotate 45 degrees around horizontal X axis */
transform: translateZ(50px);/* Move forward out of the screen */
transform-style: preserve-3d;
}
Core 3D concepts:
perspective: 800px: Sets the simulated 3D camera distance on the parent container.rotateY(deg): Flips elements horizontally around the vertical Y-axis (card flip effect).rotateX(deg): Tilts elements vertically around the horizontal X-axis.transform-style: preserve-3d: Mandates that child elements maintain 3D spatial coordinates.flowchart TD
A["3D Axis System"] --> B["rotateX -> Tilts forward / backward (Horizontal axis)"]
A --> C["rotateY -> Flips left / right (Vertical axis)"]
A --> D["translateZ -> Moves closer / farther from viewer (Depth axis)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 3D Transforms Example</title>
<style>
.scene {
perspective: 800px;
display: inline-block;
}
.box-3d {
background-color: #1e293b;
color: #38bdf8;
padding: 2rem;
border-radius: 8px;
border: 2px solid #38bdf8;
transition: transform 0.6s ease;
transform-style: preserve-3d;
}
.scene:hover .box-3d {
transform: rotateY(180deg);
}
</style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">
<h2>3D Card Flip Scene</h2>
<div class="scene">
<div class="box-3d">
<h3 style="margin: 0;">Hover to Flip 180°</h3>
</div>
</div>
</body>
</html>
perspective on the parent container: Without perspective, 3D rotations render as flat 2D distortions.backface-visibility: hidden for 2-sided card flips: Hides the back side of a card when rotated away from the viewer.Create a CSS scene using perspective: 1000px; and apply transform: rotateY(45deg); to a child element!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.