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

• perspective
• transform
• transform-style

Other Resources

• perspective-origin in the CSS specifications
• perspective-origin on MDN
• perspective by David DeSandro

Browser Support