CSS Portal

CSS perspective-origin Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The perspective-origin property defines where the viewer is positioned relative to the plane of an element when that element establishes a 3D containing context. In visual terms it sets the vanishing point or the “camera” position for any 3D transformed descendants: shifting this origin moves the apparent center of depth and changes how rotations and translations in three-dimensional space appear to the observer. Because it controls the viewpoint rather than the objects themselves, changing perspective-origin can make identical transforms look dramatically different by altering the direction and magnitude of the apparent foreshortening and convergence.

For the property to have any effect the element must provide a projection context - typically by using perspective on that element. If no such context exists, 3D transforms on children are projected as though viewed from a default position. It’s important to contrast this with the transform model: a perspective applied as a transform function (e.g., a perspective() value inside a transform list) acts locally on that element and does not use the element’s perspective-origin. Meanwhile, the local pivot for an element’s own transform operations is controlled separately by transform-origin, so you usually tune both - the former to move the camera, the latter to move the object’s axis - when composing convincing 3D effects.

In practical use, nudging the origin away from the center simulates looking at the scene from an off‑center camera: objects will appear to pivot toward the nearer edge and recede toward the opposite side. Because percentage coordinates for the origin are interpreted relative to the box of the element that defines the 3D space, changing the element’s size or positioning will also shift the perspective reference. Combined with preserved-3D behavior (controlled by transform-style) and careful animation, animating perspective-origin provides a smooth “camera pan” effect that feels like moving the vantage point around a scene rather than moving every object individually.

Definition

Initial value
50% 50%
Applies to
Transformable elements
Inherited
No
Computed value
For <length> the absolute value, otherwise a percentage.
Animatable
Yes
JavaScript syntax
object.style.perspectiveOrigin

Interactive Demo

front
back
right
left
top
bottom

Syntax

perspective-origin: [ left | center | right | top | bottom | <percentage> | <length> ]
 |
   [ left | center | right | <percentage> | <length> ]
   [ top | center | bottom | <percentage> | <length> ]
 |
   [ center | [ left | right ] ] && [ center | [ top | bottom ] ]

Values

  • <length>A length value gives a fixed length as the offset. The value for the horizontal and vertical offset represent an offset from the top left corner of the bounding box.
  • <percentage>A percentage for the horizontal perspctive offset is relative to the width of the bounding box. A percentage for the vertical offset is relative to height of the bounding box. The value for the horizontal and vertical offset represent an offset from the top left corner of the bounding box.
  • bottomComputes to '100%' for the vertical position.
  • centerComputes to '50%' ('left 50%') for the horizontal position if the horizontal position is not otherwise specified, or '50%' ('top 50%') for the vertical position if it is.
  • leftComputes to '0%' for the horizontal position.
  • rightComputes to '100%' for the horizontal position.
  • topComputes to '0%' for the vertical position.

Example

<div class="cube"> 
<div class="side front">1</div>
<div class="side back">6</div>
<div class="side right">4</div>
<div class="side left">3</div>
<div class="side top">5</div>
<div class="side bottom">2</div>
</div>
.cube { 
   font-size: 5em; 
   width: 2em; 
   height: 2em; 
   margin: 1em auto; 
   transform-style: preserve-3d; 
   perspective: 500px; 
   animation: move-origin infinite 2s; 
} 
.side { 
   position: absolute; 
   width: 2em; 
   height: 2em; 
   background: rgba(255, 99, 71, 0.6); 
   border: 1px solid rgba(0, 0, 0, 0.5); 
   color: white; 
   text-align: center; 
   line-height: 2em; 
} 
.front { 
   transform: translateZ(1em); 
} 
.top { 
   transform: rotateX( 90deg) translateZ(1em); 
} 
.right { 
   transform: rotateY( 90deg) translateZ(1em); 
} 
.left { 
   transform: rotateY(-90deg) translateZ(1em); 
} .bottom { 
   transform: rotateX(-90deg) translateZ(1em); 
} 
.back { 
   transform: rotateY(-180deg) translateZ(1em); 
} 
@keyframes move-origin { 
   0% { 
      perspective-origin: 0 0; 
   } 
   25% { 
      perspective-origin: 100% 0; 
   } 
   50% { 
      perspective-origin: 100% 100%; 
   } 
   75% { 
      perspective-origin: 0 100%; 
   } 
   100% { 
      perspective-origin: 0 0; 
   } 
}

Browser Support

The following information will show you the current browser support for the CSS perspective-origin property. Hover over a browser icon to see the version that first introduced support for this CSS property.

This property is supported by all modern browsers.
Desktop
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 1st January 2026

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!