In this section, we will learn what the perspective-origin property is and how to use it in CSS.

Click here to run the example of perspective-origin property.

CSS perspective-origin Property Definition and Usage

As mentioned in `perspective` section, we use `perspective` property to create a new perspective for the entire child elements of a container.

By default, the position of this perspective is right in the middle of the container (horizontally and vertically in the center position).

But CSS provided a property named `perspective-origin` by which we can change the position of the created perspective.

Notes:

• We apply this property to a container element, but it’s the children of that container that will take the effect.
• Also, this property is used in conjunction with the `perspective` property.

CSS perspective-origin Property Syntax

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

CSS perspective-origin Property Value

• The first value we set for this property specifies the horizontal location of the perspective to be placed.
• The second value specifies the vertical location of the perspective to be placed.

Here’s the list of values (keywords) that can be set for `perspective-origin`:

First value (horizontal)	Second value (vertical)
Left	Top
Center	Center
Right	Bottom

For example:

• perspective-origin: left top; means the position of the perspective is the left top point of the parent element.
• perspective-origin: left center; means the position of the perspective is the left center point of the parent element.
• perspective-origin: right top; means the position of the perspective is the right top point of the parent element.
• perspective-origin: 20px 30px; means the position of the perspective is horizontally 20px and vertically 30px of the parent element.

Note: the two global values “initial” and “inherit” can also be used for this property.

Example: perspective-origin in CSS

See the Pen perspective-origin in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.