Style perspectiveOrigin Property

Style 对象参考手册Style Object

Example

Set the base 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:Please use this property together with theperspectiveproperty, 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, namely 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. Seeinitial。
inherit Inherits this property from the parent element. Seeinherit。

Technical Details

Default value: 50% 50%
Return value: A string representing the element's perspective-origin property.
CSS Version CSS3

Related Articles

JavaScript Style Object:perspective Property

CSS Reference Manual:perspective-origin Property

Style 对象参考手册Style Object

Other Extensions