W3docs
en
Log in

CSS perspective-origin Property

Use the perspective-origin CSS property to decide at which perspective the element should be shown to the user. See property values and examples.

The perspective-origin defines the position from 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 must be used alongside the perspective property on the same element or an ancestor to take effect.

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.

Info

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

Initial Value50% 50%
Applies toTransformable elements.
InheritedNo.
AnimatableYes. The transformation of the perspective is animatable.
VersionCSS3
DOM Syntaxobject.style.perspectiveOrigin = "20px 70%";

Syntax

CSS perspective-origin syntax

perspective-origin: x-position y-position | x | y | closest-side | farthest-side | initial | inherit;

Example of the perspective-origin property:

CSS perspective-origin code 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;
        perspective: 130px;
        perspective-origin: 50% 50%;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        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>
Try it Yourself »

Result

SS perspective-origin left value

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

CSS perspective-origin 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;
        perspective: 80px;
        perspective-origin: left;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        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>
Try it Yourself »

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

CSS perspective-origin right value 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;
        perspective: 80px;
        perspective-origin: right;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        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>
Try it Yourself »

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

CSS perspective-origin bottom 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;
        perspective: 130px;
        perspective-origin: bottom right;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        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>
Try it Yourself »

Values

ValueDescription
x-positionSpecifies 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-positionSpecifies 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
xSets the horizontal position to the center (50%).
ySets the vertical position to the center (50%).
closest-sideSets the perspective origin to the closest side of the element.
farthest-sideSets the perspective origin to the farthest side of the element.
initialSets this property to its default value.
inheritInherits this property from its parent element.

Practice

Practice

What does the CSS 'perspective-origin' property do?