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

HTML
<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

CSS
/* 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  

CSS
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 the 0 length value.
  • center, a keyword being a shortcut for the 50% percentage value.
  • right, a keyword being a shortcut for the 100% 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 the 0 length value.
  • center, a keyword being a shortcut for the 50% percentage value.
  • bottom, a keyword being a shortcut for the 100% percentage value.

Formal syntax

CSS
<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 value50% 50%
Applies totransformable elements
Inheritedno
Percentagesrefer to the size of bounding box
Mediavisual
Computed valuefor <length> the absolute value, otherwise a percentage
Animatableyes, 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 orderOne 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

CSS CSS Property CSS Transforms Experimental Reference