CSS3 perspective-origin property
Set the base position of a 3D element:
{
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150; /* Safari and Chrome */
-webkit-perspective-origin: 10% 10%; /* Safari and Chrome */
}
Try it out . . .
Browser support
The numbers in the table support the first browser version number of the property.
The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports the prefix property.
Attributes | |||||
---|---|---|---|---|---|
perspective-origin |
36.0
12.0 -webkit- |
10.0 |
16.0
10.0 -moz- |
9.0
4.0.3 -webkit- |
23.0
15.0 -webkit- |
Description of property definition and use
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.
Defined at the time of the perspective -Origin property, which is a child element of an element, perspective, not the element itself.
Note: For Chrome and Safari users: in order to better understand the perspective property!
For Chrome and Safari users: To better understand the perspective-Origin property, check out the view instance .
Default: | 50% 50% |
---|---|
Inherited: | no |
Version: | CSS3 |
JavaScript syntax: | object .style.perspectiveOrigin="10% 10%" |
Grammar
Value | Describe |
---|---|
x-axis |
Defines the position of the view on the x-axis. Default: 50%. Possible values:
|
y-axis |
Defines the position of the view on the y-axis. Default: 50%. Possible values:
|