The CSS perspective() transform applies a perspective projection to one element. Combined with a 3D transform such as rotateX(), it makes nearer and farther edges appear at different sizes instead of leaving the element visually flat. section 16.4.1
Tilt four boxes independently
Apply the same perspective and rotation to each box: transform: perspective(200px) rotateX(30deg). A shorter perspective distance exaggerates the depth effect, while a longer distance makes it subtler. Put perspective() first in the transform list so it affects the other transform functions; individual transform properties such as rotate apply afterward. 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 four-box example using perspective(200px) and rotateX(30deg). section 16.4.1
Use the perspective property on a common ancestor when several elements should appear in one shared three-dimensional space. The perspective() function instead gives each element its own viewpoint, even when the values match. section 16.4.1 section 16.5
