perspectiveOrigin
Property
Example
Set the base point position of a 3D element:
Definition and Usage
The perspectiveOrigin
property defines the position of 3D elements based on the X-axis and Y-axis. This property allows you to change the bottom position of a 3D element.
When the perspectiveOrigin
property is defined for an element, its child elements gain perspective effects, not the element itself.
Note: Use this property together with the perspective property and it only affects elements with 3D transformations!
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