Easy Tutorial
❮ Jsref Setutcdate Met Element Getattributenode ❯

perspectiveOrigin Property

Style Object

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


Style Object

❮ Jsref Setutcdate Met Element Getattributenode ❯