CSS perspective-origin Property

Sets the vanishing point for an element's 3D space, effectively moving the viewer's position relative to the scene.

selector { perspective-origin: x-axis y-axis; }
left Sets the horizontal position of the vanishing point to 0%.
center Sets the horizontal or vertical position of the vanishing point to 50%.
right Sets the horizontal position of the vanishing point to 100%.
top Sets the vertical position of the vanishing point to 0%.
bottom Sets the vertical position of the vanishing point to 100%.
<length> Specifies a fixed distance for the origin using units like px, em, or rem.
<percentage> Defines the origin position as a percentage of the container's width or height.

Code Examples

A basic example showing a 3D box viewed from the top-left origin point.

<div style="perspective: 400px; perspective-origin: left top; border: 2px solid #333333; width: 200px; height: 200px; margin: 50px;">
  <div style="transform: rotateX(45deg); background: #ff5500; width: 100%; height: 100%;">Basic 3D Box</div>
</div>

An advanced example using a range slider to dynamically update the perspective origin via JavaScript.

<div id="scene" style="perspective: 500px; perspective-origin: 50% 50%; border: 1px solid #000000; width: 300px; height: 300px; display: flex; align-items: center; justify-content: center;">
  <div id="card" style="transform: rotateY(45deg); background: #0066ff; color: #ffffff; padding: 20px; width: 150px; height: 150px;">
    Interactive View
  </div>
</div>
<input type="range" min="0" max="100" value="50" oninput="updateOrigin(this.value)">
<script>
function updateOrigin(val) {
  const scene = document.getElementById("scene");
  scene.style.perspectiveOrigin = val + "% 50%";
}
</script>

Pro Tip

You can create a dynamic "moving camera" effect by updating the perspective-origin values with JavaScript based on the user's mouse position. This makes the 3D objects appear to shift as the user moves their mouse around the screen, creating a high-end interactive feel.

Deep Dive

Think of perspective-origin as moving your head while looking through a window. While the perspective property creates the depth of the 3D room, perspective-origin determines if you are looking from the center, the side, or the corner. It shifts the vanishing point of the Z-axis. This property must be applied to the parent element of the items being transformed. It accepts one or two values for horizontal and vertical offsets. If you specify only one keyword, the other defaults to center. Using this property correctly allows you to create more natural or dramatic 3D scenes by changing the angle from which a user views the content.

Best Practices

Always apply this to the parent container, not the individual child elements. Use keywords like "top" or "center" for simple alignments to keep your code readable, but use percentages when you need fine-tuned control over the vanishing point for custom UI designs.

Common Pitfalls

The most common mistake is applying this property to the child element that you are rotating; it will have no effect there. You must apply it to the parent that has the perspective property defined. Also, if perspective is set to "none" or "0", this property does nothing because there is no 3D depth to observe.

Accessibility

Moving the vanishing point rapidly via transitions or animations can trigger motion sickness for some users. Use the "prefers-reduced-motion" media query to disable or simplify these 3D movements for users who have requested reduced motion in their system settings.

Dev Data Table: perspective-origin property

default 50% 50%
animatable yes
inherited no
experimental no
year_intro 2009
year_standard 2012
js_syntax_1 object.style.perspectiveOrigin = "left top";
js_syntax_2 object.style.setProperty("perspective-origin", "100% 50%");
js_note In JavaScript, ensure you use the camelCase version perspectiveOrigin when accessing the style object directly.
browsers { "Chrome": 36, "Edge": 12, "Firefox": 16, "Safari": 9, "Opera": 23, "Chrome Android": 36, "Safari on iOS": 9, "Samsung Internet": 3, "Opera Mobile": 23 }
results render here...