CSS perspective Property

The CSS perspective property adds a 3D effect to child elements by defining the viewer's distance from them.

• Applies only to child elements.
• Controls how close or far elements appear on the Z-axis.
• Smaller values create a stronger 3D effect; larger values create a weaker effect.
• The vanishing point can be adjusted usingperspective-origin .
• Creates a newstacking context when set to a value other than none.

Syntax:

perspective: length| none| initial| inherit;

Examples of CSS perspective property

Here are some example discussed:

Example 1: length property is used to sets the distance of child element from viewer to Z plane. So, the smaller the value, the more splendid image is formed.

Example 2: The perspective: none property applies no 3D perspective effect, making it equivalent to 0px.

Example 3: Set an element’s CSS property to its default value i.e., initial sets the default value. There is no perspective is set.

Example 4: Makes an element inherit the property's value from its parent. If used on the root element, the property's initial value is applied