CSS perspective-origin Property

What You’ll Learn

The perspective-origin property sets the vanishing point for a 3D scene. Use it with perspective to control how rotations and depth are perceived.

Introduction

The perspective-origin property in CSS is used to define the origin point of the perspective view for a 3D transformed element.

This property controls the position from which the viewer perceives the depth and perspective of the element, affecting how 3D transformations such as rotations and translations appear.

Definition and Usage

Set perspective-origin on the same parent element that has perspective. That parent creates the 3D scene; children inside it use transforms like rotateY() or rotateX().

Moving the origin to a corner or edge changes the angle of the 3D effect, similar to moving your head while looking at a rotating card.

📝 Syntax

The syntax for the perspective-origin property allows you to specify the position in 2D space. It can take either two values for the X and Y coordinates or a single value for the X coordinate with the Y coordinate defaulting to 50%.

element {
  perspective-origin: x-axis y-axis;
}

• x-axis — Specifies the horizontal position of the perspective origin. This can be a length (e.g., 50px) or a percentage (e.g., 50%).
• y-axis — Specifies the vertical position of the perspective origin. This can also be a length or a percentage.

Basic Example

.container {
  perspective: 500px;
  perspective-origin: 100% 0%;
}

.box {
  transform: rotateY(45deg);
}

Syntax Rules

• Apply on the parent that also has perspective.
• Use two values (x y), one value (x defaults y to 50%), or keywords like top right.
• Percentages are relative to the size of the perspective element.
• Keywords such as left, center, and bottom are valid position values.
• Pair with child transform rules to see the visual change.
• Small origin shifts can create noticeably different 3D compositions.

🎯 Default Value

The default value of the perspective-origin property is 50% 50%. This means that the perspective origin is positioned at the center of the element.

💎 Property Values

The perspective-origin property accepts lengths, percentages, and position keywords.

When Does perspective-origin Matter?

perspective-origin fine-tunes 3D scenes after you have already set a perspective distance:

• Product cards — Tilt toward the user from a corner origin.
• Hero panels — Make depth feel like it comes from the left or right side.
• Dashboard tiles — Align multiple 3D panels to a shared vanishing point.
• Hover reveals — Change perceived rotation direction with origin shifts.

Without perspective on the parent, changing perspective-origin alone will not create a 3D scene.

Examples Gallery

Start with the top-right origin example, compare horizontal and vertical origins, and use keyword positions with hover motion.

<style>
  .container {
    perspective: 500px;
    perspective-origin: 100% 0%;
  }

  .box {
    width: 200px;
    height: 200px;
    background-color: lightcoral;
    transform: rotateY(45deg);
  }
</style>

<h1>Perspective-Origin Example</h1>
<div class="container">
  <div class="box"></div>
</div>

<style>
  .scene { perspective: 600px; }
  .center-scene { perspective-origin: 50% 50%; }
  .left-scene { perspective-origin: left center; }
  .card { transform: rotateY(45deg); }
</style>

<style>
  .top-origin {
    perspective: 700px;
    perspective-origin: top center;
  }

  .bottom-origin {
    perspective: 700px;
    perspective-origin: bottom center;
  }

  .panel { transform: rotateX(35deg); }
</style>

<style>
  .scene {
    perspective: 800px;
    perspective-origin: right bottom;
  }

  .tile {
    transform: rotateY(30deg) rotateX(12deg);
    transition: transform 0.45s;
  }

  .scene:hover .tile {
    transform: rotateY(0deg) rotateX(0deg);
  }
</style>

perspective-origin vs perspective

perspective sets how far away the viewer is. perspective-origin sets where the viewer is looking on the 2D plane of the parent.

Use both on the same parent scene wrapper. Distance controls strength; origin controls direction and composition.

.scene {
  perspective: 800px;
  perspective-origin: left center;
}

.panel {
  transform: rotateY(30deg);
}

💡 Best Practices