This is an experimental feature
Because this feature is still in development in some browsers, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental feature is subject to change in future version of browsers as the spec changes.

Summary

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

Syntax

perspective-origin: x-position                           or
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

where :

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

Specifications

Browser compatibility

See also

• CSS Reference