CSS perspective Property

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:

noneDefines no perspective. This is the default value.
lengthSets 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.
initialSets the perspective property to its default value(none).
inheritInherits the perspective property from its parent element.

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.perspective = “200px”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment