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-position | Specify 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-position | Specify 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%. |
| initial | Sets the perspective-origin property to its default value. |
| inherit | Inherits the perspective-origin property from the parent element. |
General Info
| Default Value | 50% 50% |
| Inherited | No |
| JavaScript Usage | element.style.perspectiveOrigin = “right” |
