CSS Reference Property

perspective-origin

The perspective-origin property is used to select the position at which the viewer is looking at a three-dimensional space.

It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element to which it is applied.

The value provided by perspective-origin is used as a vanishing point by the perspective property. The default vanishing point of a three-dimensional space is usually at the center. It can be changed using perspective-origin, thus making it appear as if the viewer is looking up or down at a scene, or from the side, or from any other position in front of the screen.

Normally the assumed position of the viewer’s eye is centered on a screen. This position can be moved if desired – for example, if a web page contains multiple scenes that should share a common perspective – by setting perspective-origin.

perspective-origin
The result of moving the viewer’s eye upwards using perspective-origin.

The perspective-origin property is used on an element that has a perspective value set. It does not have any effect on the element when used without the perspective property.

Official Syntax

  • Syntax:

    perspective-origin: [ left | center | right | top | bottom | <percentage> | <length> ]
    | 
      [ left | center | right | <percentage> | <length> ]
      [ top | center | bottom | <percentage> | <length> ] <length>?
    |
      [ center | [ left | right ] ] && [ center | [ top | bottom ] ]
  • Initial: 50% 50%
  • Applies To: transformable elements
  • Animatable: yes, as simple list of length, percentage, or calc()

Values

<percentage>
A <percentage> value. A percentage for the horizontal offset (first value) is relative to the width of the border box. A percentage for the vertical offset (second value) is relative to height of the border box. The value for the horizontal and vertical offset represent an offset from the top left corner of the border box. See the <percentage> entry for a list of possible values.
<length>
A <length> value. A length value gives a fixed length as the offset. The value for the horizontal and vertical offset represent an offset from the top left corner of the bounding box. See the <length> entry for a list of possible values and units.
top
Computes to ‘0%’ for the vertical position.
right
Computes to ‘100%’ for the horizontal position.
bottom
Computes to ‘100%’ for the vertical position.
left
Computes to ‘0%’ for the horizontal position.
center
Computes to ‘50%’ (left 50%) for the horizontal position if the horizontal position is not otherwise specified, or ‘50%’ (top 50%) for the vertical position if it is.

Notes

If two or more values are defined and either no value is a keyword, or the only used keyword is center, then the first value represents the horizontal position (or offset) and the second represents the vertical position (or offset).

If only one value is specified, the second value is assumed to be center.

Examples

The following are all valid perspective-origin declarations:

perspective-origin: top center;
perspective-origin: 100% 30px;
perspective-origin: 30px 60px;
perspective-origin: center;
perspective-origin: left;
perspective-origin: 30% 50% 0px;
perspective-origin: bototm right;
                

The following defines the position of the viewer’s eye using perspective-origin on an element with a perspective value set.

.container {
    perspective: 1000px;
    perspective-origin: top; /* same as top center; the viewer is looking down at the scene */
}
                

Live Demo

The following demo shows the result of changing the perspective-origin value when looking at a three-dimensional scene with a cube inside it.

View this demo on the Codrops Playground

Browser Support

The perspective-origin property is supported in Chrome (prefixed with -webkit), Firefox (prefixed with -moz- in versions between 10 and 16), Safari (-webkit- prefixed), Internet Explorer 10+, and on Android 3+ and iOS. It is not supported in Opera.

Written by

Last updated February 3, 2015 at 12:34 pm by Pedro Botelho

Do you have a suggestion, question or want to contribute? Submit an issue.