Prop Style Perspectiveorigin

HTML DOM Style perspectiveOrigin Property

-- Learning is not just about technology, but also about dreams!

JavaScript Reference

Overview

JavaScript Objects

Browser Objects

DOM Objects

HTML Objects

Style Object

Style perspectiveOrigin Property

Example

Set the base point position of a 3D element:

document.getElementById("myDIV").style.perspectiveOrigin="10px 50%";

Try it Yourself »

Definition and Usage

The perspectiveOrigin property defines the position of a 3D element 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 get the perspective effect, not the element itself.

Note: Use this property together with the perspective property, and it only affects 3D transformed elements!

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

IE10+ and Firefox support the perspectiveOrigin property.

Chrome, Safari, and Opera support an alternative property, the WebkitPerspecitveOrigin property.

Syntax

Return the perspectiveOrigin property:

object.style.perspectiveOrigin

Set the perspectiveOrigin property:

object.style.perspectiveOrigin="x-axis y-axis|initial|inherit"

Property Values

Value	Description
x-axis	Defines the position of the view on the x-axis. Possible values: left center right length % Default value: 50%
y-axis	Defines the position of the view on the y-axis. Possible values: top center bottom length % 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 element's perspective-origin property.
CSS Version:	CSS3

JavaScript Style Object: perspective Property

CSS Reference: perspective-origin Property

Style Object

YouTip