CSS3 perspective-origin Property


Example

Set a 3D element's base placement:

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

Try it yourself »

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!

To better understand the perspective-origin property, view a demo.

Default value: 50% 50%
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS3
JavaScript syntax: object.style.perspectiveOrigin="10px 50%" Try it

Browser Support

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

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

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

CSS Syntax

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

Property Values

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%

initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS 3D Transforms

HTML DOM reference: perspectiveOrigin property



SHARE THIS PAGE

COLOR PICKER

colorpicker