CSS perspective-origin Property

Definition and Usage

The perspective-origin property sets the vanishing point for a 3D scene. Put it on the same parent that has perspective. Children with 3D transform values then foreshorten toward that point.

The default is 50% 50% (center). Keywords such as top, left, and bottom right work like other CSS position values. This is not transform-origin, which sets the pivot of the transformed element itself.

CSS Syntax

One value sets X (Y becomes center). Two values set X then Y. Percentages resolve against the element’s width and height.

Property Values

How to Use perspective-origin

Set distance first, then aim the vanishing point.

1. Put perspective on the parent scene (for example 500px).
2. Add perspective-origin on that same parent.
3. Give a child a 3D transform such as rotateY(45deg).
4. Start with center, then try a corner or percentage until the skew matches the design.

Live Preview

Same card and perspective: 500px. Change only perspective-origin.

CSS Examples

Each snippet focuses on perspective-origin. Use Try It Yourself for a live editor.

<style>
  section {
    perspective: 500px;
    perspective-origin: center;
  }

  div {
    width: 120px;
    height: 80px;
    background: #1d4ed8;
    color: #fff;
    text-align: center;
    line-height: 80px;
    transform: rotateY(45deg);
  }
</style>

<section>
  <div>Card</div>
</section>

<style>
  section {
    perspective: 500px;
    perspective-origin: bottom right;
  }

  div {
    width: 120px;
    height: 80px;
    background: #1d4ed8;
    color: #fff;
    text-align: center;
    line-height: 80px;
    transform: rotateY(45deg);
  }
</style>

<section>
  <div>Card</div>
</section>

<style>
  section {
    perspective: 500px;
    perspective-origin: 20% 80%;
  }

  div {
    width: 120px;
    height: 80px;
    background: #1d4ed8;
    color: #fff;
    text-align: center;
    line-height: 80px;
    transform: rotateY(45deg);
  }
</style>

<section>
  <div>Card</div>
</section>

Key Takeaways