CSS 3D Transforms
3D transforms add a Z axis. You can rotate cards, flip tiles, or build small scenes — all rendered by the GPU.
3D functions
| Function | Effect |
|---|---|
translateZ(n) | Move along the Z axis (closer/further from the viewer). |
translate3d(x,y,z) | All three axes in one call. Often used to force GPU compositing. |
rotateX(deg) | Tilt forward / back. |
rotateY(deg) | Spin like a door. |
rotateZ(deg) | Same as 2D rotate. |
scale3d / matrix3d | 3D scale / full matrix. |
Setting up the scene
CSS
.scene {
perspective: 800px; /* viewer distance — required for 3D */
perspective-origin: 50% 50%;
}
.card {
transform-style: preserve-3d;
transition: transform 0.5s;
}
.card:hover { transform: rotateY(180deg); }
.card .back { backface-visibility: hidden; transform: rotateY(180deg); }
Three properties that go together
| Property | Where | Purpose |
|---|---|---|
perspective | Parent | Distance from "camera" — smaller = stronger 3D. |
transform-style: preserve-3d | Container of 3D children | Don't flatten the rotation. |
backface-visibility | The element | Hide the back side when it's facing away. |
Tip: Card-flip is the classic intro project. Master
perspective + preserve-3d + backface-visibility together and you've got 90% of 3D CSS down.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS 3D Transforms</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Give the scene a perspective so 3D becomes visible.
.scene {
: 800px; }
Distance from the viewer.
Discussion
Loading…