CSS perspective-origin ominaisuus

Definition and usage

The perspective-origin property defines the X-axis and Y-axis on which the 3D element is based. This property allows you to change the bottom position of the 3D element.

When the perspective-origin property is defined for an element, its child elements will receive the perspective effect, not the element itself.

Note:This property must be used with perspective Properties used together, and only affect 3D transformation elements.

See also:

CSS3 tutorial:CSS3 3D muunnos

HTML DOM reference manual:perspectiveOrigin property

Example

Set the base point position of 3D elements:

div
{
perspective:150;
perspective-origin: 10% 10%;
}

Try it yourself

CSS syntax

perspective-origin: x-axis y-axis;

Attribute value

Value Description
x-axis

Define the position of the view on the x-axis. Default value: 50%.

Possible values:

  • left
  • center
  • right
  • length
  • %
y-axis

Define the position of the view on the y-axis. Default value: 50%.

Possible values:

  • top
  • center
  • bottom
  • length
  • %

Technical details

Default value: 50% 50%
Inheritance: no
Version: CSS3
JavaScript syntax: object.style.perspectiveOrigin="10% 10%"

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen versio, joka tukee tätä ominaisuutta täysin.

Chrome IE / Edge Firefox Safari Opera
36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0.3 -webkit-		 23.0
15.0 -webkit-