CSS perspective-origin Property

The perspective-origin defines the position at which the user is looking at the 3D-positioned element.

The perspective property uses the value of the perspective-origin as a vanishing point.

The perspective-origin property always works with the perspectiveproperty.

Only the child element gets a perspective view not the element itself.

For maximum browser compatibility this property is used with -webkit- extension.

Initial Value 50% 50%
Applies to Transformable elements.
Inherited No.
Animatable Yes. The transformation of the perspective is animatable.
Version CSS3
DOM Syntax object.style.perspectiveOrigin = "20px 70%";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
      position: relative;
      height: 150px;
      width: 150px;
      margin-left: 60px;
      border: 1px solid #666;
      -webkit-perspective: 130px; /* Safari 4-8  */
      -webkit-perspective-origin: 50% 50%; /* Safari 4-8  */  
      perspective: 130px;
      perspective-origin: 50% 50%;  
      }
      .element2 {
      padding: 50px;
      position: absolute;
      border: 1px solid #000;
      background-color: #1c87c9;
      background: #8ebf42; 
      -webkit-transform-style: preserve-3d; /* Safari 3-8  */  
      -webkit-transform: rotateX(45deg); /* Safari 3-8  */
      transform-style: preserve-3d;
      transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: 50% 50%:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

Let’s see an example with "left" value:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
      position: relative;
      height: 150px;
      width: 150px;
      margin-left: 20px;
      border: 1px solid #666;
      -webkit-perspective: 80px; /* Safari 4-8  */
      -webkit-perspective-origin: left; /* Safari 4-8  */  
      perspective: 80px;
      perspective-origin: left;  
      }
      .element2 {
      padding: 50px;
      position: absolute;
      border: 1px solid #000;
      background-color: #1c87c9;
      background: #8ebf42; 
      -webkit-transform-style: preserve-3d; /* Safari 3-8  */  
      -webkit-transform: rotateX(45deg); /* Safari 3-8  */
      transform-style: preserve-3d;
      transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: left:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

Another example where the perspective-origin is specified as "right":

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
      position: relative;
      height: 150px;
      width: 150px;
      margin-left: 160px;
      border: 1px solid #666;
      -webkit-perspective: 80px; /* Safari 4-8  */
      -webkit-perspective-origin: right; /* Safari 4-8  */  
      perspective: 80px;
      perspective-origin: right;  
      }
      .element2 {
      padding: 50px;
      position: absolute;
      border: 1px solid #000;
      background-color: #1c87c9;
      background: #8ebf42; 
      -webkit-transform-style: preserve-3d; /* Safari 3-8  */  
      -webkit-transform: rotateX(45deg); /* Safari 3-8  */
      transform-style: preserve-3d;
      transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: right:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

Another example where the perspective-origin is defined as "bottom right":

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
      position: relative;
      height: 150px;
      width: 150px;
      margin-left: 60px;
      border: 1px solid #666;
      -webkit-perspective: 130px; /* Safari 4-8  */
      -webkit-perspective-origin: bottom right; /* Safari 4-8  */  
      perspective: 130px;
      perspective-origin: bottom right;  
      }
      .element2 {
      padding: 50px;
      position: absolute;
      border: 1px solid #000;
      background-color: #1c87c9;
      background: #8ebf42; 
      -webkit-transform-style: preserve-3d; /* Safari 3-8  */  
      -webkit-transform: rotateX(45deg); /* Safari 3-8  */
      transform-style: preserve-3d;
      transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: bottom right:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>

Values

Value Description
x-position Specifies the position of view in x-axis. It can have the following values:
  • left,
  • right,
  • center,
  • length,
  • percentage.
y-position Specifies the position of view in y-axis. It can have the following values:
  • top,
  • center,
  • bottom,
  • length,
  • percentage.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Browser support

36.0+
12.0-35.0 -webkit-
10.0+ 12.0+ 16.0+
10.0-15.0 -moz-
4.0+
-webkit-
23.0+
15.0-22.0 -webkit-



Related articles