The perspective property establishes a shared camera distance for transformed descendants, allowing the browser to project their 3D scene into a 2D image. Smaller values exaggerate depth; larger values make it subtler. section 16.4.1
Use the property when several transformed elements should appear within the same scene:
- Apply perspective to a common ancestor, then apply individual 3D transforms such as rotateX() to its descendants. section 16.4.1
- Use perspective() when each element should receive its own perspective; use perspective when elements should share one. section 16.4.1
- Remember that 3D transforms without perspective appear flat because distant parts do not become smaller. section 16.4.1
Shared perspective for four boxes
Set perspective: 200px on .row and rotate each .box with rotateX(30deg). The boxes then share one projection instead of receiving separate perspective() transforms.
Flying cards
A container with perspective: 500px can make animated cards appear to fly toward the viewer. Keyframes combine translateZ(), rotateY(), and opacity, moving cards from -800px to 0.
