perspective
Gives an element a 3D feel by setting the distance between the viewer and the 'z=0' plane. A smaller number creates a more intense 3D effect.
Quick example
.three-d-space {
/* Sets up the depth for children using 3D transforms */
perspective: 800px;
}
.three-d-space .child {
transform: rotateY(45deg);
}Quick facts
Initial value
noneInherited
No
Applies to
transformable elements
Animation type
length
Values
none perspective Browser Support
Widely available Since 2022 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
Safe to use without fallbacks.
36+
16+
9+
12+