Revision 295964 of perspective-origin

  • Revision slug: CSS/perspective-origin
  • Revision title: perspective-origin
  • Revision id: 295964
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

{{ SeeCompatTable() }}

Summary

The perspective-origin CSS property determines the position the viewer is looking at. It is used as the vanishing point by the {{ cssxref("perspective") }} property.

  • {{ Xref_cssinitial() }}: 50% 50%
  • Applies to : any transformable element
  • {{ Xref_cssinherited() }}: no
  • Percentages : refer to the size of the element's box
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: Keywords and {{ xref_csspercentage() }} resolve to a percentage; {{ xref_csslength() }} values resolve to an absolute length
  • {{ xref_cssanimatable() }}: ?
  • {{ xref_csscanonicalorder() }}: {{ Xref_cssuniqueorder() }}

Syntax

Formal grammar: [ <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

Values

x-position
Indicates the position of the abscissa of the vanishing point. It can have one of the following values:
  • {{ xref_csspercentage() }} indicating the position relative to the width of the element. The value may be negative.
  • {{ xref_csslength() }} 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:
  • {{ xref_csspercentage() }} indicating the position relative to the height of the element. The value may be negative.
  • {{ xref_csslength() }} 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

perspective-origin:top left; perspective-origin:top; perspective-origin:top right;
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
perspective-origin:left; perspective-origin:50% 50%; perspective-origin:right;
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
perspective-origin:bottom left; perspective-origin:bottom; perspective-origin:bottom right;
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6

Specifications

Specification Status Comment
{{ SpecName('CSS3 Transforms', '#perspective-origin', 'perspective-origin') }} {{ Spec2('CSS3 Transforms') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 12{{ property_prefix('-webkit') }} {{ CompatGeckoDesktop("10") }}{{ property_prefix('-moz') }}
{{ CompatGeckoDesktop("16") }}
10 {{ CompatNo() }} {{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0{{ property_prefix('-webkit') }} {{ CompatGeckoMobile("10") }}{{ property_prefix('-moz') }}
{{ CompatGeckoMobile("16") }}
{{ CompatUnknown() }} {{ CompatNo() }} {{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}

See also

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>perspective-origin</code> <a href="/en/CSS" title="CSS">CSS</a> property determines the position the viewer is looking at. It is used as the <em>vanishing point</em> by the {{ cssxref("perspective") }} property.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}:</dfn> <code>50% 50%</code></li>
  <li><dfn>Applies to :</dfn> any transformable element</li>
  <li><dfn>{{ Xref_cssinherited() }}:</dfn> no</li>
  <li><dfn>Percentages :</dfn> refer to the size of the element's box</li>
  <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}:</dfn> Keywords and {{ xref_csspercentage() }} resolve to a percentage; {{ xref_csslength() }} values resolve to an absolute length</li>
  <li><dfn>{{ xref_cssanimatable() }}:</dfn> ?</li>
  <li><dfn>{{ xref_csscanonicalorder() }}:</dfn> {{ Xref_cssuniqueorder() }}</li>
</ul>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
Formal grammar: [ &lt;percentage&gt; | &lt;length&gt; | left | center | right | top | bottom] |
                [ [ &lt;percentage&gt; | &lt;length&gt; | left | center | right ] &amp;&amp; [ &lt;percentage&gt; | &lt;length&gt; | top | center | bottom ] ]
</pre>
<pre>
perspective-origin: <em>x-position</em>            /* one-value syntax */
perspective-origin: <em>x-position</em> <em>y-position</em> /* two-value syntax */

When both <em>x-position</em> and <em>y-position</em> are keywords, the following is also valid:
perspective-origin: <em>y-position x-position</em>
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <em>x-position</em></dt>
  <dd>
    Indicates the position of the abscissa of the <em>vanishing point</em>. It can have one of the following values:
    <ul>
      <li>{{ xref_csspercentage() }} indicating the position relative to the width of the element. The value may be negative.</li>
      <li>{{ xref_csslength() }} indicating the position using a length value. The value may be negative.</li>
      <li><code>left</code>, a keyword being a shortcut for the <code>0</code> length value.</li>
      <li><code>center</code>, a keyword being a shortcut for the <code>50%</code> percentage value.</li>
      <li><code>right</code>, a keyword being a shortcut for the <code>100%</code> percentage value.</li>
    </ul>
  </dd>
  <dt>
    <em>y-position</em></dt>
  <dd>
    Indicates the position of the ordinate of the <em>vanishing point</em>. It can have one of the following values:
    <ul>
      <li>{{ xref_csspercentage() }} indicating the position relative to the height of the element. The value may be negative.</li>
      <li>{{ xref_csslength() }} indicating the position using a length value. The value may be negative.</li>
      <li><code>top</code>, a keyword being a shortcut for the <code>0</code> length value.</li>
      <li><code>center</code>, a keyword being a shortcut for the <code>50%</code> percentage value.</li>
      <li><code>bottom</code>, a keyword being a shortcut for the <code>100%</code> percentage value.</li>
    </ul>
  </dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<div>
  <table class="standard-table">
    <tbody>
      <tr>
        <td><code>perspective-origin:top left;</code></td>
        <td><code>perspective-origin:top;</code></td>
        <td><code>perspective-origin:top right;</code></td>
      </tr>
      <tr>
        <td>
          <div class="container" style="width:100px;height:100px;margin:25px;border:none;">
            <div class="cube" style="width:100%;height:100%;-moz-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspective-origin:top left;">
              <div class="front" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );">
                1</div>
              <div class="back" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );">
                2</div>
              <div class="right" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );">
                3</div>
              <div class="left" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px ); ">
                4</div>
              <div class="top" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );">
                5</div>
              <div class="bottom" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0, 196, 0.7);-moz-transform: rotateX(-90deg) translateZ( 50px );">
                6</div>
            </div>
          </div>
        </td>
        <td>
          <div class="container" style="width:100px;height:100px;margin:25px;border:none;">
            <div class="cube" style="width:100%;height:100%;-moz-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspective-origin:top;">
              <div class="front" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );">
                1</div>
              <div class="back" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );">
                2</div>
              <div class="right" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );">
                3</div>
              <div class="left" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );">
                4</div>
              <div class="top" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );">
                5</div>
              <div class="bottom" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0, 196, 0.7);-moz-transform: rotateX(-90deg) translateZ( 50px );">
                6</div>
            </div>
          </div>
        </td>
        <td>
          <div class="container" style="width:100px;height:100px;margin:25px;border:none;">
            <div class="cube" style="width:100%;height:100%;-moz-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspective-origin:top right;">
              <div class="front" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );">
                1</div>
              <div class="back" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );">
                2</div>
              <div class="right" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );">
                3</div>
              <div class="left" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );">
                4</div>
              <div class="top" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );">
                5</div>
              <div class="bottom" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0, 196, 0.7);-moz-transform: rotateX(-90deg) translateZ( 50px );">
                6</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td><code>perspective-origin:left;</code></td>
        <td><code>perspective-origin:50% 50%;</code></td>
        <td><code>perspective-origin:right;</code></td>
      </tr>
      <tr>
        <td>
          <div class="container" style="width:100px;height:100px;margin:25px;border:none;">
            <div class="cube" style="width:100%;height:100%;-moz-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspective-origin:left">
              <div class="front" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );">
                1</div>
              <div class="back" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );">
                2</div>
              <div class="right" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );">
                3</div>
              <div class="left" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );">
                4</div>
              <div class="top" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );">
                5</div>
              <div class="bottom" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0, 196, 0.7);-moz-transform: rotateX(-90deg) translateZ( 50px );">
                6</div>
            </div>
          </div>
        </td>
        <td>
          <div class="container" style="width:100px;height:100px;margin:25px;border:none;">
            <div class="cube" style="width:100%;height:100%;-moz-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspective-origin:50% 50%;">
              <div class="front" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );">
                1</div>
              <div class="back" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );">
                2</div>
              <div class="right" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );">
                3</div>
              <div class="left" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );">
                4</div>
              <div class="top" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );">
                5</div>
              <div class="bottom" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0, 196, 0.7);-moz-transform: rotateX(-90deg) translateZ( 50px );">
                6</div>
            </div>
          </div>
        </td>
        <td>
          <div class="container" style="width:100px;height:100px;margin:25px;border:none;">
            <div class="cube" style="width:100%;height:100%;-moz-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspective-origin:right;">
              <div class="front" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );">
                1</div>
              <div class="back" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );">
                2</div>
              <div class="right" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );">
                3</div>
              <div class="left" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );">
                4</div>
              <div class="top" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );">
                5</div>
              <div class="bottom" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0, 196, 0.7);-moz-transform: rotateX(-90deg) translateZ( 50px );">
                6</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td><code>perspective-origin:bottom left;</code></td>
        <td><code>perspective-origin:bottom;</code></td>
        <td><code>perspective-origin:bottom right;</code></td>
      </tr>
      <tr>
        <td>
          <div class="container" style="width:100px;height:100px;margin:25px;border:none;">
            <div class="cube" style="width:100%;height:100%;-moz-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspective-origin:bottom left;">
              <div class="front" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );">
                1</div>
              <div class="back" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );">
                2</div>
              <div class="right" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );">
                3</div>
              <div class="left" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );">
                4</div>
              <div class="top" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );">
                5</div>
              <div class="bottom" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0, 196, 0.7);-moz-transform: rotateX(-90deg) translateZ( 50px );">
                6</div>
            </div>
          </div>
        </td>
        <td>
          <div class="container" style="width:100px;height:100px;margin:25px;border:none;">
            <div class="cube" style="width:100%;height:100%;-moz-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspective-origin:bottom;">
              <div class="front" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );">
                1</div>
              <div class="back" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );">
                2</div>
              <div class="right" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );">
                3</div>
              <div class="left" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );">
                4</div>
              <div class="top" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );">
                5</div>
              <div class="bottom" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0, 196, 0.7);-moz-transform: rotateX(-90deg) translateZ( 50px );">
                6</div>
            </div>
          </div>
        </td>
        <td>
          <div class="container" style="width:100px;height:100px;margin:25px;border:none;">
            <div class="cube" style="width:100%;height:100%;-moz-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspective-origin:bottom right">
              <div class="front" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 0, 0, 0.3 );-moz-transform: translateZ( 50px );">
                1</div>
              <div class="back" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0, 255,   0, 1 ); color: black;-moz-transform: translateZ( -50px );">
                2</div>
              <div class="right" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0,   0, 0.7 );-moz-transform: rotateY( 90deg) translateZ( 50px );">
                3</div>
              <div class="left" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba(   0,   0, 196, 0.7 );-moz-transform: rotateY(-90deg) translateZ( 50px );">
                4</div>
              <div class="top" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196, 196,   0, 0.7 );-moz-transform: rotateX( 90deg) translateZ( 50px );">
                5</div>
              <div class="bottom" style="display: block;position: absolute;width: 100px;height: 100px;border: none;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: rgba( 196,   0, 196, 0.7);-moz-transform: rotateX(-90deg) translateZ( 50px );">
                6</div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Transforms', '#perspective-origin', 'perspective-origin') }}</td>
      <td>{{ Spec2('CSS3 Transforms') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>12{{ property_prefix('-webkit') }}</td>
        <td>{{ CompatGeckoDesktop("10") }}{{ property_prefix('-moz') }}<br />
          {{ CompatGeckoDesktop("16") }}</td>
        <td>10</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>3.0{{ property_prefix('-webkit') }}</td>
        <td>{{ CompatGeckoMobile("10") }}{{ property_prefix('-moz') }}<br />
          {{ CompatGeckoMobile("16") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">Using CSS Transforms</a></li>
  <li>{{ CSS_Reference:Transforms() }}</li>
</ul>
Revert to this revision