3d Transforms in CSS
3D Transforms in CSS allow you to move and manipulate elements in three-dimensional space — along the X, Y, and Z axes. They build on 2D transforms by adding depth (Z axis) and perspective.
? Common 3D Transform Functions:
| Function | Description |
|---|---|
translate3d(x, y, z) | Moves the element in 3D space. |
rotateX(angle) | Rotates the element around the X-axis. |
rotateY(angle) | Rotates the element around the Y-axis. |
rotateZ(angle) | Rotates the element around the Z-axis (same as 2D rotate). |
scale3d(x, y, z) | Scales the element in 3D space. |
perspective(n) | Adds perspective from the viewer's point of view. |
matrix3d(...) | Applies a 3D transformation matrix. |
? Examples:
1. Translate in 3D
.box { transform: translate3d(100px, 50px, 30px);}Moves the element 100px right, 50px down, and 30px "closer" in 3D space.
2. Rotate Around X or Y Axis
.box { transform: rotateX(45deg);}Rotates the element 45° around the X-axis (flips up/down).
.box { transform: rotateY(60deg);}Rotates the element 60° around the Y-axis (flips left/right).
3. Perspective
.container { perspective: 800px;}.box { transform: rotateY(45deg);}The perspective on the container gives the child .box depth, making the rotation more realistic.
4. Scale in 3D
.box { transform: scale3d(1.2, 1.2, 1.2);}Scales the element by 1.2 times in all three dimensions.
? Combining Transforms
.box { transform: rotateX(30deg) rotateY(45deg) translateZ(50px);}? Notes:
Use
perspectiveon the parent to create depth for child elements.transform-style: preserve-3d;can be used to maintain the 3D position of child elements.Common in animations, flipping cards, 3D sliders, etc.
Want a live example (like a flip card or cube) in HTML/CSS?
