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.
It is documented as part of the CSS Transforms specification.
Syntax
/* Usage Example */
.three-d-space {
/* Sets up the depth for children using 3D transforms */
perspective: 800px;
}
.three-d-space .child{
transform: rotateY(45deg);
}
/* Syntax */
perspective: none;
/* Global values */
perspective: inherit;
perspective: initial;
perspective: revert;
perspective: revert-layer;
perspective: unset;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.
36+
16+
9+
12+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more