The perspective-origin
CSS property determines the position at which the viewer is looking. It is used as the vanishing point by the perspective
property.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
The perspective-origin
and perspective
properties are attached to the parent of a child transformed in 3-dimensional space, unlike the perspective()
transform function which is placed on the element being transformed.
Syntax
/* One-value syntax */ perspective-origin: x-position; /* Two-value syntax */ 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; /* Global values */ perspective-origin: inherit; perspective-origin: initial; perspective-origin: unset;
Values
- x-position
- Indicates the position of the abscissa of the vanishing point. It can have one of the following values:
<length-percentage>
indicating the position as an absolute length value or relative to the width of the element. 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:
<length-percentage>
indicating the position as an absolute length value or relative to the height of the element. 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.
Formal definition
Initial value | 50% 50% |
---|---|
Applies to | transformable elements |
Inherited | no |
Percentages | refer to the size of bounding box |
Computed value | for <length> the absolute value, otherwise a percentage |
Animation type | simple list of length, percentage, or calc |
Formal syntax
<position>where
<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
where
<length-percentage> = <length> | <percentage>
Examples
Changing the perspective origin
This example shows cubes with popular perspective-origin
values.
HTML
<section> <figure> <figcaption><code>perspective-origin: top left;</code></figcaption> <div class="container"> <div class="cube potl"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: top;</code></figcaption> <div class="container"> <div class="cube potm"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: top right;</code></figcaption> <div class="container"> <div class="cube potr"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: left;</code></figcaption> <div class="container"> <div class="cube poml"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: 50% 50%;</code></figcaption> <div class="container"> <div class="cube pomm"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: right;</code></figcaption> <div class="container"> <div class="cube pomr"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: bottom left;</code></figcaption> <div class="container"> <div class="cube pobl"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: bottom;</code></figcaption> <div class="container"> <div class="cube pobm"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: bottom right;</code></figcaption> <div class="container"> <div class="cube pobr"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: -200% -200%;</code></figcaption> <div class="container"> <div class="cube po200200neg"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: 200% 200%;</code></figcaption> <div class="container"> <div class="cube po200200pos"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: 200% -200%;</code></figcaption> <div class="container"> <div class="cube po200200"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> </section>
CSS
/* perspective-origin values (unique per example) */ .potl { perspective-origin: top left; } .potm { perspective-origin: top; } .potr { perspective-origin: top right; } .poml { perspective-origin: left; } .pomm { perspective-origin: 50% 50%; } .pomr { perspective-origin: right; } .pobl { perspective-origin: bottom left; } .pobm { perspective-origin: bottom; } .pobr { perspective-origin: bottom right; } .po200200neg { perspective-origin: -200% -200%; } .po200200pos { perspective-origin: 200% 200%; } .po200200 { perspective-origin: 200% -200%; } /* Define the container div, the cube div, and a generic face */ .container { width: 100px; height: 100px; margin: 24px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective: 300px; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* Define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translateZ(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotateY(180deg) translateZ(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotateY(90deg) translateZ(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotateY(-90deg) translateZ(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotateX(90deg) translateZ(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotateX(-90deg) translateZ(50px); } /* Make the layout a little nicer */ section { background-color: #EEE; padding: 10px; font-family: sans-serif; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Transforms Level 2 The definition of 'perspective-origin' in that specification. |
Editor's Draft | Initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
perspective-origin | Chrome
Full support
36
| Edge
Full support
12
| Firefox
Full support
16
| IE Full support 10 | Opera
Full support
23
| Safari
Full support
9
| WebView Android
Full support
37
| Chrome Android
Full support
36
| Firefox Android
Full support
16
| Opera Android
Full support
24
| Safari iOS
Full support
9
| Samsung Internet Android
Full support
3.0
|
Support for three-value syntax of position | Chrome
No support
36 — 68
| Edge
No support
12 — 79
| Firefox
No support
16 — 70
| IE Full support 10 | Opera
No support
15 — 55
| Safari
Full support
9
| WebView Android
No support
37 — 68
| Chrome Android
No support
36 — 68
| Firefox Android
Full support
16
| Opera Android
No support
14 — 48
| Safari iOS
Full support
9
| Samsung Internet Android
No support
3.0 — 10.0
|
Legend
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.