perspective-origin

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage 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 specification changes.

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.

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

Initial value50% 50%
Applies totransformable elements
Inheritedno
Percentagesrefer to the size of bounding box
Mediavisual
Computed valuefor <length> the absolute value, otherwise a percentage
Animation typesimple list of length, percentage, or calc
Canonical orderOne or two values, with length made absolute and keywords translated to percentages

Syntax

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

<position>

where
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]

where
<length-percentage> = <length> | <percentage>

Example

This example shows cubes with popular perspective-origin values.

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

/* 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 2
The definition of 'perspective-origin' in that specification.
Editor's Draft Initial definition.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 12-webkit (Yes)-webkit
(Yes)
10 (10)-moz
16 (16)[1]
10 15 (Yes)-webkit
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0-webkit (Yes)-webkit
(Yes)
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

Document Tags and Contributors

 Last updated by: mfluehr,