perspective-origin

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

The perspective-origin CSS property determines the position at which the viewer is looking. It is used as the vanishing point by the perspective property.

Try it

The perspective-origin and perspective properties are attached to the parent of a child transformed in 3-dimensional space, unlike the perspective() transform function which is placed on the element being transformed.

Syntax

css
/* One-value syntax */
perspective-origin: x-position;

/* Two-value syntax */
perspective-origin: x-position y-position;

/* When both x-position and y-position are keywords,
   the following is also valid */
perspective-origin: y-position x-position;

/* Global values */
perspective-origin: inherit;
perspective-origin: initial;
perspective-origin: revert;
perspective-origin: revert-layer;
perspective-origin: unset;

Values

x-position

Indicates the position of the abscissa of the vanishing point. It can have one of the following values:

  • <length-percentage> indicating the position as an absolute length value or relative to the width of the element. The value may be negative.
  • left, a keyword being a shortcut for the 0 length value.
  • center, a keyword being a shortcut for the 50% percentage value.
  • right, a keyword being a shortcut for the 100% percentage value.
y-position

Indicates the position of the ordinate of the vanishing point. It can have one of the following values:

  • <length-percentage> indicating the position as an absolute length value or relative to the height of the element. The value may be negative.
  • top, a keyword being a shortcut for the 0 length value.
  • center, a keyword being a shortcut for the 50% percentage value.
  • bottom, a keyword being a shortcut for the 100% percentage value.

Formal definition

Initial value50% 50%
Applies totransformable elements
Inheritedno
Percentagesrefer to the size of bounding box
Computed valuefor <length> the absolute value, otherwise a percentage
Animation typesimple list of length, percentage, or calc

Formal syntax

perspective-origin = 
<position>

<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<length-percentage> =
<length> |
<percentage>

Examples

Changing the perspective origin

An example showing how to change perspective-origin is given in Using CSS transforms > Changing the perspective origin.

Specifications

Specification
CSS Transforms Module Level 2
# perspective-origin-property

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
perspective-origin
bottom
center
left
right
top

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

See also