CSS perspective-origin Property

Define at from which position the user is looking at the 3D-positioned element:

#div1 {
perspective: 100px;
perspective-origin: left;
}

Definition and Usage

The perspective-origin property defines at from which position the user is looking at the 3D-positioned element.

When defining the perspective-origin property for an element, it is the CHILD elements that will get the effect, NOT the element itself.

Note: This property must be used in conjunction with the perspective property!

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

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-	9.0 4.0.3 -webkit-	23.0 15.0 -webkit-

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

Property Value	Description	Demo
x-axis	Defining where the view is placed at the x-axis Possible values: left center right length % Default value: 50%	Demo ❯
y-axis	Defining where the view is placed at the y-axis Possible values: top center bottom length % Default value: 50%	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit