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