Easy Tutorial
❮ Jsref Unshift Prop Node Lastchild ❯

Style perspectiveOrigin Property

Style Object

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


Style Object

❮ Jsref Unshift Prop Node Lastchild ❯