Manuales 
perspective-origin 2a2g2s
The perspective-origin property is used to select the position at which the viewer is looking at a three-dimensional space. 12522p
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 2f2j3w
- 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 445h6m
- <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 6p2z1x
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 5w70f
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 603y6q
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 51c73
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.