CSS perspective-origin Property
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
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
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
Tablets & Mobile
Last updated by CSSPortal on: 1st January 2026
