perspective-origin

The perspective-origin property designates the position from which the user is viewing the 3D-positioned element.

Syntax

When the perspective-origin property is defined, it is applied the child elements, not the element itself. This property must be used in conjunction with the perspective property.

div.ex {
  perspective: 150px;
  perspective-origin: right;
}

Values

x-axis
Defines where the user’s view is placed at the x-axis. Default value is 50%. Possible values: left, center, right, length, and percentage.

y-axis
Defines where the user’s view is placed at the y-axis. Default value is 50%. Possible values: top, center, bottom, length, and percentage.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of perspective-origin? Submit a codepen.io demo and we'll showcase it here ↴