perspective-origin

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions 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.

  • Initial value 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

Specifications

Specification Status Comment
CSS Transforms Level 1 Working Draft  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 12-webkit 10.0 (10)-moz
16.0 (16)		 10 Not supported (Yes)-webkit
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0-webkit 10.0 (10)-moz
16.0 (16)		 ? Not supported (Yes)-webkit

See also

Document Tags and Contributors

Tags:
Contributors to this page: Sheppy, kscarfone, ethertank, CutenessOverload, teoli
Last updated by: kscarfone,
Hide Sidebar