CSS perspective Property

The CSS perspective property is used to give 3D objects perspective. The representation of 3D objects on a 2D plane to give the appearance of depth and distance in relation to each other is known as perspective. When the perspective property is defined, the child element receives perspective rather than the parent element. As a result, the value specifies how close the child is to the Z plane.

Each 3D element grows larger when the z is greater than 0 and shrinks when the z is less than 0. The perspective property value determines the strength of the effect. Large perspective values can produce a small transformation, while small perspective values can produce a large transformation.

If the z-axis coordinates of the 3D elements behind the user are greater than the prospective CSS property value, the element cannot be drawn. The fade point is placed at the center of the element by default, but we can change this using the perspective-origin property. A new stacking context can be created by using the perspective property with a value other than none.

Property Values

Supported Browsers