Manuales 
perspective-origin 4c6sm
The perspective-origin property is used to select the position at which the viewer is looking at a three-dimensional space. 5wn4f
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 property.
Official Syntax 55184y
- 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 584j31
- <percentage>
-
A
<percentage>entry for a list of possible values. - <length>
-
A
<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 z5jo
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 3e5p5z
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 2x4j2k
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 k5t66
The perspective-origin property is ed 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 ed in Opera.