Set a 3D element’s base placement:
div {
-webkit-perspective: 150px; /* Safari 4-8 */
-webkit-perspective-origin: 10% 10%; /* Safari 4-8 */
perspective: 150px;
perspective-origin: 10% 10%;
}
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 |
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-axisPossible values:
Default value: 50% |
| y-axis | Defining where the view is placed at the y-axisPossible values:
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 |