Table of contents
- 1. Summary
- 2. Syntax
- 3. Examples
- 4. Specifications
- 5. Browser compatibility
- 6. See also
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 : block and inline elements
- Inherited : no
- Percentages : refer to the size of the element's box
- Media:
visual
- Computed value : same as specified value.
Syntax
perspective-origin: x-position or perspective-origin: x-position y-position When both x-position and y-position are keywords, the following is also valid: perspective-origin: y-position x-position
where :
- 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 the0
length value.center
, a keyword being a shortcut for the50%
percentage value.right
, a keyword being a shortcut for the100%
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 the0
length value.center
, a keyword being a shortcut for the50%
percentage value.bottom
, a keyword being a shortcut for the100%
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 3D Transforms Level 3 | This has been merged in another draft. Please update |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 12 -webkit | 10.0 (10) -moz | 10 -ms | -- | (Yes) -webkit |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 3.0 -webkit | 10.0 (10) -moz | ? | -- | (Yes) -webkit |