The CSS rotateX() transform function rotates an element around the horizontal x-axis, pitching it forward or backward. Pass an angle such as rotateX(30deg) to control the rotation. section 16.4
The rotation becomes visibly three-dimensional when combined with perspective. A perspective() transform gives one element its own viewpoint, while the perspective property lets related elements share a common 3D space. section 16.4.1
Tilt four boxes
Apply a local viewpoint and x-axis rotation to each box: transform: perspective(200px) rotateX(30deg);. To make the boxes appear to occupy one shared space, put perspective: 200px on their common .row ancestor and use transform: rotateX(30deg) on each box. section 16.4.1
Keep these practical rules in mind:
- Use rotateX() for forward-and-back pitching; rotateY() turns around the vertical axis, while rotate() is an alias for rotation around z. section 16.4
- When using perspective(), place it before the other transform functions in the same transform declaration. section 16.4.1
- Choose perspective() for separate viewpoints and perspective on a common ancestor for a shared viewpoint. section 16.4.1
Listing 16.13 Applying 3D transforms to the boxes
.row {
display: flex;
gap: 4em;
justify-content: center;
}
.box {
box-sizing: border-box;
width: 150px;
padding: 60px 0;
text-align: center;
background-color: oklch(60% 0.12 158deg);
transform: perspective(200px) rotateX(30deg); #1
}
Inspect the complete CSS example that applies perspective(200px) and rotateX(30deg) to four boxes. section 16.4.1
Listing 16.14 Establishing a common perspective
.row {
display: flex;
gap: 4em;
justify-content: center;
perspective: 200px; #1
}
.box {
box-sizing: border-box;
width: 150px;
padding: 60px 0;
text-align: center;
background-color: oklch(60% 0.12 158deg);
transform: rotateX(30deg); #2
}
Compare the shared-perspective version, where the parent establishes perspective and each box uses rotateX(30deg). section 16.4.1
