X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS perspective-origin Property

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

The perspective-origin property is one of the CSS3 properties.

The perspective property uses the value of the perspective-origin as a vanishing point. By default, the vanishing point of a 3D space is at the center. The perspective-origin property can be used to change the position of the vanishing point.

The perspective-origin property always works with the perspective property.

When two or more values are specified but none of them is a keyword the first value will describe the horizontal position and the second one will describe the vertical position. If only one value is defined, the second one is supposed to be the center value.

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 of the perspective-origin property:

<!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>

Example of the perspective-origin property with the "left" value:

<!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>

Example of the perspective-origin property with the "right" value:

<!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>

Example of the perspective-origin property defined as "bottom right":

<!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, which is equal to the 0 length value.
  • right, which is equal to the 100% percentage value.
  • center, which is equal to the 50% percentage value.
  • length
  • percentage.
y-position Specifies the position of view in y-axis. It can have the following values:
  • top, which is equal to the 0 length value.
  • center, which is equal to the 50% percentage value.
  • bottom, which is equal to the 100% percentage value.
  • length
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-
12.0+ 16.0+
10.0-15.0 -moz-
4.0+
-webkit-
23.0+
15.0-22.0 -webkit-

Practice Your Knowledge

Which statement is correct about CSS perspective-origin property?



Do you find this helpful?

Related articles