CSS perspective-origin Property

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.

Rotated box
  .perspective {
    padding: 20px;
    margin-left: 20px;
    perspective: 120px;
    perspective-origin: left;

  .rotated {
    width: 150px;
    padding: 30px;
    background: lightblue;
    transform: rotateX(45deg);

<div class="perspective">
  <div class="rotated">Rotated box</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:
  • left
  • center
  • right
  • length
  • %
y-axis The default value is 50%. Specifies where user is placed at the y-axis.
Possible values:
  • top
  • center
  • bottom
  • length
  • %
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Browser support

This table shows when perspective-origin support started for each browser.

36.0 Jul 2014
16.0 Oct 2012
10.0 Sep 2012
23.0 Jul 2013
9.0 Sep 2015

You may also like