The perspective-origin property sets the origin for perspective property like transform-origin property does for transform property, which is that it defines where a 3D element is based in the X-axis and Y-axis thus allowing us to change the bottom position of that element. It takes the same values and keywords as transform-origin.

Syntax:

selector { 

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

}

Values:

  • x-axis; Transforms the position origin of an element by X-axis; Possible values are:
    • left
    • center
    • right
    • length (px, em…)
    • %
  • y-axis; Transforms the position origin of an element by Y-axis; Possible values are:
    • top
    • center
    • bottom
    • length (px, em…)
    • %
  • z-axis; In 3D transformation, it transforms the position origin of an element by Z-axis; Possible values are:
    • length (px, em…)
  • initialinherit
NOTE: The perspective-origin property has to be used together with the perspective property.

Example

The perspective-origin property example:

 

›› go to examples ››