The perspective-origin property determines the origin for the perspective property. Think of it as the vanishing point of the current 3D-space.
Note as for the perspective property, perspective-origin has to be defined on the parent element in order to give the transformed children depth.
The perspective-origin property doesn't do anything by itself. It has to be defined on an element along with perspective.
/**
* Syntax
* perspective-origin: x-position
* perspective-origin: x-position y-position
*
* perspective-origin: <percentage> | <length> | constants | inherit
*/
.element1 { perspective-origin: 25% 75%; }
.element2 { perspective-origin: 10px 25px; }
.element3 { perspective-origin: left bottom; }Below is a demo showing how a 3D cube behaves when altering its vanishing point by changing the perspective-origin value (constants).
Hey, let's animate the perspective-origin, just for fun!
- It starts at `0% 0%` (top left)
- Then go to `100% 0%` (top right)
- Then to `100% 100%` (bottom right)
- Then to `0% 100%` (bottom left)
- Then go back to 1. and restart
Related Properties
Other Resources
- perspective-origin in the CSS specifications
- perspective-origin on MDN
- perspective by David DeSandro
Browser Support
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
| Chrome | Opera | Firefox | IE | Edge | Safari |
|---|---|---|---|---|---|
| 12* | 15* | 10* | 11 | 12 | 4* |
Mobile / Tablet
| iOS Safari | Opera Mobile | Opera Mini | Android | Android Chrome | Android Firefox |
|---|---|---|---|---|---|
| 3.2* | 46 | No | 3* | 66 | 60 |
That’s pretty awesome.
For some reason this isn’t working in chrome on my work machine, It has chrome 28 running on ubuntu, it seams like none of the 3D effects seam to work in this version of chrome on ubuntu.