Style perspectiveOrigin
Property
Example
Set the base point position of a 3D element:
Definition and Usage
The perspectiveOrigin
property defines the position of the 3D element based on the X-axis and Y-axis. This property allows you to change the bottom position of the 3D element.
When the perspectiveOrigin
property is defined for an element, its child elements will gain perspective effects, not the element itself.
Note: Use this property together with the perspective property and it only affects 3D transformed elements!
Browser Support
IE10+ and Firefox support the perspectiveOrigin
property.
Chrome, Safari, and Opera support an alternative property, WebkitPerspectiveOrigin
.
Syntax
Return the perspectiveOrigin
property:
Set the perspectiveOrigin
property:
Property Values
Value | Description |
---|---|
x-axis | Defines the view's position on the x-axis. Possible values: left<br> center<br> right<br> length<br> % Default value: 50% |
y-axis | Defines the view's position on the y-axis. Possible values: top<br> center<br> bottom<br> length<br> % Default value: 50% |
initial | Sets this property to its default value. See initial |
inherit | Inherits this property from its parent element. See inherit |
Technical Details
Default value: | 50% 50% |
---|---|
Return value: | A string, representing the perspective-origin property of the element. |
--- | --- |
CSS version | CSS3 |
--- | --- |
Related Articles
JavaScript Style Object: perspective Property
CSS Reference: perspective-origin Property