CSS - perspective-origin
The perspective-origin
CSS property determines the position the viewer is looking at. It is used as the vanishing point by the perspective
property.
Example
HTML Content
<table> <tbody> <tr> <th><code>perspective-origin: top left;</code> </th> <th><code>perspective-origin: top;</code> </th> <th><code>perspective-origin: top right;</code> </th> </tr> <tr> <td> <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> </td> <td> <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> </td> <td> <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> </td> </tr> <tr> <th><code>perspective-origin: left;</code> </th> <th><code>perspective-origin: 50% 50%;</code> </th> <th><code>perspective-origin: right;</code> </th> </tr> <tr> <td> <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> </td> <td> <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> </td> <td> <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> </td> </tr> <tr> <th><code>perspective-origin: bottom left;</code> </th> <th><code>perspective-origin: bottom;</code> </th> <th><code>perspective-origin: bottom right;</code> </th> </tr> <tr> <td> <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> </td> <td> <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> </td> <td> <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> </td> </tr> </tbody> </table>
CSS Content
/* Shorthand classes for perspective-origin values */ .potl { perspective-origin: top left; -webkit-perspective-origin: top left; } .potm { perspective-origin: top; -webkit-perspective-origin: top; } .potr { perspective-origin: top right; -webkit-perspective-origin: top right; } .poml { perspective-origin: left; -webkit-perspective-origin: left; } .pomm { perspective-origin: 50% 50%; -webkit-perspective-origin: 50% 50%; } .pomr { perspective-origin: right; -webkit-perspective-origin: right; } .pobl { perspective-origin: bottom left; -webkit-perspective-origin: bottom left; } .pobm { perspective-origin: bottom; -webkit-perspective-origin: bottom; } .pobr { perspective-origin: bottom right; -webkit-perspective-origin: bottom right; } /* 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; -webkit-backface-visibility: visible; -webkit-perspective: 300px; -webkit-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); -webkit-transform: translateZ(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotateY(180deg) translateZ(50px); -webkit-transform: rotateY(180deg) translateZ(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotateY(90deg) translateZ(50px); -webkit-transform: rotateY(90deg) translateZ(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotateY(-90deg) translateZ(50px); -webkit-transform: rotateY(-90deg) translateZ(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotateX(90deg) translateZ(50px); -webkit-transform: rotateX(90deg) translateZ(50px) } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotateX(-90deg) translateZ(50px); -webkit-transform: rotateX(-90deg) translateZ(50px); } /* Make the table a little nicer */ th, p, td { background-color: #EEEEEE; padding: 10px; font-family: sans-serif; text-align: left; }
Result
Syntax
perspective-origin: x-position; /* one-value syntax */ perspective-origin: x-position y-position; /* two-value syntax */ /* 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:
<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.
Formal syntax
<a href="css/position_value" title=""><position></a><p>where <br><code><position> = <a href="css/value_definition_syntax#brackets" title="Brackets">[</a><a href="css/value_definition_syntax#brackets" title="Brackets">[</a> left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> right <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> top <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> bottom <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/perspective-origin#length-percentage"><length-percentage></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> right <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/perspective-origin#length-percentage"><length-percentage></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> top <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> bottom <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/perspective-origin#length-percentage"><length-percentage></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> right <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/perspective-origin#length-percentage"><length-percentage></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> && <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> top <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> bottom <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/perspective-origin#length-percentage"><length-percentage></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#brackets" title="Brackets">]</a></code></p><p>where <br><code><length-percentage> = <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a></code></p>
Description
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 | transformable elements |
Inherited | no |
Percentages | refer to the size of bounding box |
Media | visual |
Computed value | for <length> the absolute value, otherwise a percentage |
Animatable | yes, as a simple list of , a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. |
Canonical order | One or two values, with length made absolute and keywords translated to percentages |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 12-webkit | 10 (10)-moz 16 (16)[1] |
10 | 15 | (Yes)-webkit |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 3.0-webkit | 10.0 (10)-moz 16.0 (16)[1] |
8.1 | (Yes)-webkit | (Yes)-webkit |
[1] In addition to the unprefixed support, Gecko 45.0 (Firefox 45.0 / Thunderbird 45.0 / SeaMonkey 2.42) added support for a -webkit
prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit
, defaulting to false
. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true
.
See Also
Specifications
Specification | Status | Comment |
---|---|---|
CSS Transforms Level 1 The definition of 'perspective-origin' in that specification. |
Working Draft | Initial definition |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/perspective-origin