CSS perspective-origin Property

CSS perspective-origin property defines the position of the perspective point at which the viewer is looking to create a 3D effect.

The perspective origin is always defined on the parent element, not the child. Also, it must be defined along with the perspective property. Otherwise, it will not affect the element.

The perspective origin is defined using two parameters, x-position and y-position. These values can be specified using CSS keywords such as ‘left’, ‘right’, ‘bottom’, etc. or using any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. Try out the example below to see how it works:

Example:

.parent1{
  perspective: 100px;
  perspective-origin: left; 
}
.parent2{
  perspective: 100px;
  perspective-origin: right; 
}
.parent3{
  perspective: 100px;
  perspective-origin: 100px 100px; 
}

CSS Syntax

The perspective-origin property has the following syntax:

perspective-origin: x-position y-position|initial|inherit;

Property Values

The perspective-origin property accepts the following values:

x-positionSpecify the position of the perspective point on the X-axis. It can accept any CSS position keywords such as ‘left’, ‘right’, ‘bottom’, etc. or any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. It can also be specified in percentage(%). The default value is 50%.
y-positionSpecify the position of the perspective point on the Y-axis. It can accept any CSS position keywords such as ‘left’, ‘right’, ‘bottom’, etc. or any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. It can also be specified in percentage(%). The default value is 50%.
initialSets the perspective-origin property to its default value.
inheritInherits the perspective-origin property from the parent element.

General Info

Default Value50% 50%
InheritedNo
JavaScript Usageelement.style.perspectiveOrigin = “right”

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.

    View all posts

Leave a Comment