CSS3 perspective-origin Property


Example

Set the base position of a 3D element:

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

Try it Yourself »

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -ms-, or -moz- specify the first browser version that supported the prefixed property.

Property
perspective-origin 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0.3 -webkit-		 23.0
15.0 -webkit-

Property definition and usage instructions

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 defined, the perspective-origin property applies to an element's child elements, providing the perspective view, rather than to the element itself.

Note:For Chrome and Safari users: For a better understandingperspectiveproperty!

For Chrome and Safari users:For a better understanding of the perspective-origin property, seeView examples.

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

Syntax

perspective-origin: x-axis y-axis;

Value Description
x-axis

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

Possible values:

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

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

Possible values:

  • top
  • center
  • bottom
  • length
  • %
other extensions