perspective-origin property - CSS Reference

Definition and Usage

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

Initial 50% 50%
Applies to transformable elements
Inherited no
Percentages refer to the size of bounding box
Media visual
Computed Value for <length> the absolute value, otherwise a percentage
Animatable yes, as a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
Canonical order One or two values, with length made absolute and keywords translated to percentages

Syntax

Formal syntax: [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ]

perspective-origin: x-position            /* one-value syntax */
perspective-origin: x-position y-position /* two-value syntax */
When both x-position and y-position are keywords, the following is also valid:
perspective-origin: y-position x-position
perspective-origin: inherit

Values

x-position

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

<percentage> indicating the position relative to the width of the element. The value may be negative.
<length> indicating the position using a length value. 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:

<percentage> indicating the position relative to the height of the element. The value may be negative.
<length> indicating the position using a length value. 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.

Examples

perspective-origin:top left;	perspective-origin:top;	perspective-origin:top right;
1 2 3 4 5 6	1 2 3 4 5 6	1 2 3 4 5 6
perspective-origin:left;	perspective-origin:50% 50%;	perspective-origin:right;
1 2 3 4 5 6	1 2 3 4 5 6	1 2 3 4 5 6
perspective-origin:bottom left;	perspective-origin:bottom;	perspective-origin:bottom right;
1 2 3 4 5 6	1 2 3 4 5 6	1 2 3 4 5 6