Style perspectiveOrigin property

Definition and usage

perspectiveOrigin property defines the position of the 3D element on the x-axis and y-axis. This property allows you to change the bottom position of the 3D element.

When defining the element's perspectiveOrigin When positioning the child element, not the element itself, when positioning the

Note:This property must be with perspective property Used together, and only affects elements with 3D transformations!

See also:

JavaScript Style Object:perspective property

CSS Reference Manual:The perspective-origin property

Example

Set the base position of 3D elements:

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

Try it yourself

Syntax

Return perspectiveOrigin property:

object.style.perspectiveOrigin

Set perspectiveOrigin property:

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

Property value

Value Description
x-axis

Defines the position of the view on the x-axis.

  • 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 also initial.
inherit Inherits this property from its parent element. See also inherit.

Technical details

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

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 6.1 23.0