Perspective Origin Property
Last updated: 2026-09-13
perspective-origin Perspective Origin Property
The perspective-origin property defines the viewer's position for 3D perspective — where the vanishing point projects onto the element. The default is the center of the element (50% 50%). Adjusting it changes the angle from which the 3D scene is viewed — from above, from the side, and so on — and it works together with perspective.
| Category | |
|---|---|
| Initial Value | 50% 50% |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
perspective-origin: [<length-percentage> | left | center | right] [<length-percentage> | top | center | bottom];⚙️ Values
| Value | Type | Description |
|---|---|---|
<length> | <percentage> | Type | The coordinates of the perspective origin |
left | center | right | top | bottom | Keyword | A predefined position |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| perspective-origin | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| Supported in all major browsers | |||||
Tip： Percentages are relative to the element on which the perspective is applied; the left/right/top/bottom keywords are more intuitive.
Tip： Changing perspective-origin has no effect on 2D transforms — the difference only appears in 3D transforms such as rotateX/Y and translateZ.
❓ FAQ
QWhat is the difference between perspective-origin and transform-origin?
Aperspective-origin is set on the parent that carries the perspective and defines where the viewer's vanishing point projects on the scene, affecting the shared perspective direction of all 3D children. transform-origin is set on a single element and defines the reference point for that element's own transforms. The former controls where you look from; the latter controls what the element rotates or scales around.
QHow do I make an element look like it is viewed from below in 3D?
APut the viewpoint below the element: perspective-origin: 50% 100% places the vanishing point at the bottom center of the container, so the viewer looks up and the element appears in a low-angle view. Similarly, 0% 50% looks from the left, 100% 50% from the right, and 50% 0% from above. Combine this with the rotation angle to get the exact viewpoint you want.
QWhat are the perspective-origin percentage values relative to in CSS?
AThey are relative to the dimensions of the parent element that has the perspective. 0% 0% is the top-left corner, 100% 100% is the bottom-right, and the default 50% 50% is the center. Besides percentages, you can use the left, center, right, top, and bottom keywords or length values. It does not affect 2D transforms — the difference only shows in 3D.
QWhy can't I see any change after modifying perspective-origin?
Aperspective-origin only affects 3D transforms that have perspective. If the children have no 3D transforms such as rotateX/Y or translateZ, or the parent has no perspective at all, moving the vanishing point produces no visual difference. Also, when the perspective distance is very large, the differences between viewpoints become negligible.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
