Avatar of Chris Coyier
Chris Coyier on (Updated on )

Find and fix web accessibility issues with ease using axe DevTools Pro. Try for free!

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).

Check out this Pen!

Hey, let’s animate the perspective-origin, just for fun!

Check out this Pen!
  1. It starts at `0% 0%` (top left)
  2. Then go to `100% 0%` (top right)
  3. Then to `100% 100%` (bottom right)
  4. Then to `0% 100%` (bottom left)
  5. Then go back to 1. and restart

Related Properties

Other Resources

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.



Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari