The perspective-origin
property sets the user position in 3D space.
This position allows the browser to calculate the perpective of 3D elements.
Only child elements will get the 3D effect when using this property.
A transformed element with perspective-origin
set to left
.
Perspective defines how far away the object is from the user.
<style>
.perspective {
padding: 20px;
margin-left: 20px;
perspective: 120px;
perspective-origin: left;
}
.rotated {
width: 150px;
padding: 30px;
background: lightblue;
transform: rotateX(45deg);
}
</style>
<div class="perspective">
<div class="rotated">Rotated box</div>
</div>
perspective-origin: x-axis y-axis | initial | inherit;
Value | Description |
---|---|
x-axis |
The default value is 50%. Specifies where the user is placed at the x-axis. Possible values:
|
y-axis |
The default value is 50%. Specifies where user is placed at the y-axis. Possible values:
|
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
This table shows when perspective-origin
support started for each browser.
Chrome
|
36.0 | Jul 2014 |
Firefox
|
16.0 | Oct 2012 |
IE/Edge
|
10.0 | Sep 2012 |
Opera
|
23.0 | Jul 2013 |
Safari
|
9.0 | Sep 2015 |