CSS3 perspective-origin Property

Example

Set a 3D element's base placement:

div
{
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150; /* Safari */
-webkit-perspective-origin: 10% 10%; /* Safari */
}

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The perspective-origin property is not supported in any browser.

Safari supports an alternative, the -webkit-perspecitve-origin property.


Definition and Usage

The perspective-origin property defines where a 3D element is based in the x- and the y-axis. This property allows you to change the bottom position of 3D elements.

When defining the perspective-origin property for an element, it is the CHILD elements that are positioned, NOT the element itself.

Note: This property must be used together with the perspective property, and only affects 3D transformed elements!

For Safari users: To better understand the perspective-origin property, view a demo.

Default value: 50% 50%
Inherited: no
Version: CSS3
JavaScript syntax: object.style.perspectiveOrigin="10% 10%"


Syntax

perspective-origin: x-axis y-axis;

Property Value Description
x-axis Defining where the view is placed at the x-axis

Possible values:

  • left
  • center
  • right
  • length
  • %

Default value: 50%

y-axis Defining where the view is placed at the y-axis

Possible values:

  • top
  • center
  • bottom
  • length
  • %

Default value: 50%