CSS3 `perspective-origin` Property

Example

Set the base position for a 3D element:

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

Browser Support

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

Numbers prefixed with -webkit-, -ms-, or -moz- indicate the first version that supported the prefixed property.

Property	Chrome	IE	Firefox	Safari	Opera
perspective-origin	36.0 <br>12.0 -webkit-	10.0	16.0 <br>10.0 -moz-	9.0 <br>4.0.3 -webkit-	23.0 <br>15.0 -webkit-

Property Definition and Usage

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

When defining the perspective-origin property, it applies to the child elements of an element, not the element itself.

Note: For Chrome and Safari users: To better understand the perspective property!

For Chrome and Safari users: To better understand the perspective-origin property, please view the example.

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

Syntax

Value	Description
x-axis	Defines the view position on the x-axis. Default value: 50%. Possible values: left<br>center<br>right<br>length<br>%
y-axis	Defines the view position on the y-axis. Default value: 50%. Possible values: top<br>center<br>bottom<br>length<br>%

❮ Sel Hover Sel Link ❯

CSS3 perspective-origin Property

Example

Browser Support

Property Definition and Usage

Syntax

CSS3 `perspective-origin` Property