perspective-origin

perspective-origin positions the vanishing point used by the perspective property. It belongs on the projecting parent, while transform-origin belongs to a transformed box’s own pivot.

Compare viewpoints

Both children have the same 3D rotation. The parent viewpoint moves from its left edge to its right edge, changing the projection.

<p>Left viewpoint</p>
<div class="scene left"><div class="face">Left</div></div>
<p>Right viewpoint</p>
<div class="scene right"><div class="face">Right</div></div>

.scene {
  perspective: 250px;
  width: 200px;
  height: 120px;
  margin: 1rem;
  background: #eff6ff;
}
.face {
  width: 120px;
  height: 80px;
  background: #2563eb;
  color: white;
  padding: 0.5rem;
  box-sizing: border-box;
  transform: rotateY(45deg);
}
.left {
  perspective-origin: left center;
}
.right {
  perspective-origin: right center;
}

Choose a top-centered viewpoint

The child has unchanged transform-origin. The parent’s vanishing point is at the top center, so projection and rotation pivot remain distinct settings.

<div class="scene"><div class="face">Top viewpoint</div></div>

.scene {
  perspective: 250px;
  width: 200px;
  height: 120px;
  margin: 1rem;
  background: #eff6ff;
}
.face {
  width: 120px;
  height: 80px;
  background: #2563eb;
  color: white;
  padding: 0.5rem;
  box-sizing: border-box;
  transform: rotateY(45deg);
}
.scene {
  perspective-origin: center top;
}
.face {
  transform: rotateX(40deg);
}

Values and defaults

The initial value is 50% 50% and the property is not inherited. Positions use lengths, percentages, or left/right/top/bottom/center keywords. Percentages use the projecting box’s dimensions. A single-axis value centers the other axis, and positions outside the box are allowed.

Common mistakes

Without a non-none perspective property and transformed descendants, changing the origin may show no result. This does not set perspective()’s origin inside a child transform list; that uses the child’s transform-origin context. It also does not reposition the child in normal flow. Test a real 3D projection rather than using a static “depth” card.

Learn perspective, transform-origin, and transform.

Sources and browser support

MDN: perspective-origin describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.