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.

Example

#

A transformed element with perspective-origin set to left.
Perspective defines how far away the object is from the user.

Rotated box
<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>

Syntax

perspective-origin: x-axis y-axis | 
                    initial | inherit;

Values

#

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.

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

You may also like

Guides