perspective-origin

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.

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

/* 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: 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 value 50% 50%
Applies to transformable elements
Inherited no
Percentages refer to the size of bounding box
Computed value for <length> the absolute value, otherwise a percentage
Animation type simple list of length, percentage, or calc

Formal syntax

<position>

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

where
<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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
perspective-origin
36
12
12
12
16
10
49
10
23
15
9
4
37
3
36
18
16
10
49
24
14
9
2
3.0
1.0
three_value_syntax
36-68
12
12-79
12
16-70
10
49
10
15-55
9
4
37-68
3
36-68
18
16
10
49
14-48
9
2
3.0-10.0
1.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin