mozilla
Your Search Results

    perspective-origin

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

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

    Syntax

    Formal syntax: [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ]
    
    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
    
    perspective-origin: inherit
    

    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.

    Examples

    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

    Specifications

    Specification Status Comment
    CSS Transforms Level 1 Working Draft  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 12-webkit 10 (10)-moz
    16 (16)
    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)
    8.1 (Yes)-webkit (Yes)-webkit

    See also

    Document Tags and Contributors

    Last updated by: RahulKapuriya12692,
    Hide Sidebar