CSS perspective-origin property

Definition and Usage

The perspective-origin property defines the X-axis and Y-axis on which the 3D element is based. This property allows you to change the bottom position of the 3D element.

When the perspective-origin property is defined for an element, its child elements will receive the perspective effect, not the element itself.

Note:This property must be used with perspective Used together with properties and only affects 3D transformation elements.

See Also:

CSS3 Tutorial:CSS3 3D transformation

HTML DOM Reference Manual:perspectiveOrigin Property

Example

Set the base point position of the 3D element:

div
{
perspective:150;
perspective-origin: 10% 10%;
}

Try It Yourself

CSS Syntax

perspective-origin: x-axis y-axis;

Property Value

Value Description
x-axis

Define the position of the view on the x-axis. Default value: 50%.

Possible Values:

  • left
  • center
  • right
  • length
  • %
y-axis

Define the position of the view on the y-axis. Default value: 50%.

Possible Values:

  • top
  • center
  • bottom
  • length
  • %

Technical Details

Default Value: 50% 50%
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.perspectiveOrigin="10% 10%"

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0.3 -webkit-		 23.0
15.0 -webkit-