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.

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using CSS Transforms
* `transform-style`
* `<transform-function>`
* `perspective`
* `transform: perspective()` function