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