Home / CSS Almanac / Properties / P / perspective-origin

perspective-origin

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.

Desktop

ChromeOperaFirefoxIEEdgeSafari
12*15*10*11124*

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
3.2*46No3*7063