CSS perspective property adds a 3D effect in elements by specifying some distance between the z-plane and the user. The perspective value can be specified in any valid CSS length formats like ‘px’, ’em’, ‘rem’, ‘cm’, etc.
Keep the below points in mind when using the perspective property:
- When we specify perspective, only the child elements get a 3D perspective, not the parent element. Here, the parent element only creates a 3D-space for its children.
- The 3D perspective and the distance between the z-plane and the user are reciprocal of each other. This means, the lower the distance, the higher the 3D perspective, or vice versa.
Example:
.parent{
perspective: 200px;
}
.child{
transform-style: preserve-3d;
transform: transformX(40deg);
}
CSS Syntax
The perspective property has the following syntax:
perspective: none|length|initial|inherit;
Property Values
The perspective property accepts the following values:
| none | Defines no perspective. This is the default value. |
| length | Sets a distance between the z=0 plane and the user to create a 3D perspective. It can be specified in any valid CSS length formats like ‘px’, ’em’, ‘rem’, ‘cm’, etc. |
| initial | Sets the perspective property to its default value(none). |
| inherit | Inherits the perspective property from its parent element. |
General Info
| Default Value | none |
| Inherited | No |
| JavaScript Usage | element.style.perspective = “200px” |
