mozilla

Revision 347789 of perspective-origin

  • Revision slug: CSS/perspective-origin
  • Revision title: perspective-origin
  • Revision id: 347789
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment +webkit styles

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

<div>{{CSSRef}}</div>
<div>{{SeeCompatTable}}</div>
<h2 id="Summary">Summary</h2>
<p>The <code>perspective-origin</code> <a href="/en-US/docs/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%;-webkit-perspective:300px;-webkit-transform-style:preserve-3d;-webkit-perspective-origin:top left;-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);-webkit-transform:translateZ( 50px );-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;-webkit-transform:translateZ( -50px );-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);-webkit-transform:rotateY( 90deg) translateZ( 50px );-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);-webkit-transform:rotateY(-90deg) translateZ( 50px );-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);-webkit-transform:rotateX( 90deg) translateZ( 50px );-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);-webkit-transform:rotateX(-90deg) translateZ( 50px );-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%;-webkit-perspective:300px;-webkit-transform-style:preserve-3d;-webkit-perspective-origin:top;-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);-webkit-transform:translateZ( 50px );-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;-webkit-transform:translateZ( -50px );-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);-webkit-transform:rotateY( 90deg) translateZ( 50px );-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);-webkit-transform:rotateY(-90deg) translateZ( 50px );-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);-webkit-transform:rotateX( 90deg) translateZ( 50px );-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);-webkit-transform:rotateX(-90deg) translateZ( 50px );-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%;-webkit-perspective:300px;-webkit-transform-style:preserve-3d;-webkit-perspective-origin:top right;-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);-webkit-transform:translateZ( 50px );-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;-webkit-transform:translateZ( -50px );-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);-webkit-transform:rotateY( 90deg) translateZ( 50px );-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);-webkit-transform:rotateY(-90deg) translateZ( 50px );-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);-webkit-transform:rotateX( 90deg) translateZ( 50px );-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);-webkit-transform:rotateX(-90deg) translateZ( 50px );-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%;-webkit-perspective:300px;-webkit-transform-style:preserve-3d;-webkit-perspective-origin:left;-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;-webkit-transform:translateZ( -50px);-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);-webkit-transform:rotateY( 90deg) translateZ( 50px);-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);-webkit-transform:rotateY(-90deg) translateZ( 50px);-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);-webkit-transform:rotateX( 90deg) translateZ( 50px);-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);-webkit-transform:rotateX(-90deg) translateZ( 50px);-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%;-webkit-perspective:300px;-webkit-transform-style:preserve-3d;-webkit-perspective-origin:50% 50%;-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);-webkit-transform:translateZ( 50px);-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;-webkit-transform:translateZ( -50px);-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);-webkit-transform:rotateY( 90deg) translateZ( 50px);-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);-webkit-transform:rotateY(-90deg) translateZ( 50px);-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);-webkit-transform:rotateX( 90deg) translateZ( 50px);-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);-webkit-transform:rotateX(-90deg) translateZ( 50px);-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%;-webkit-perspective:300px;-webkit-transform-style:preserve-3d;-webkit-perspective-origin:right;-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);-webkit-transform:translateZ( 50px);-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;-webkit-transform:translateZ( -50px);-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);-webkit-transform:rotateY( 90deg) translateZ( 50px);-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);-webkit-transform:rotateY(-90deg) translateZ( 50px);-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);-webkit-transform:rotateX( 90deg) translateZ( 50px);-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);-webkit-transform:rotateX(-90deg) translateZ( 50px);-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%;-webkit-perspective:300px;-webkit-transform-style:preserve-3d;-webkit-perspective-origin:bottom left;-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);-webkit-transform:translateZ( 50px);-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;-webkit-transform:translateZ( -50px);-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);-webkit-transform:rotateY( 90deg) translateZ( 50px);-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);-webkit-transform:rotateY(-90deg) translateZ( 50px);-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);-webkit-transform:rotateX( 90deg) translateZ( 50px);-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);-webkit-transform:rotateX(-90deg) translateZ( 50px);-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%;-webkit-perspective:300px;-webkit-transform-style:preserve-3d;-webkit-perspective-origin:bottom;-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);-webkit-transform:translateZ( 50px);-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;-webkit-transform:translateZ( -50px);-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);-webkit-transform:rotateY( 90deg) translateZ( 50px);-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);-webkit-transform:rotateY(-90deg) translateZ( 50px);-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);-webkit-transform:rotateX( 90deg) translateZ( 50px);-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);-webkit-transform:rotateX(-90deg) translateZ( 50px);-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%;-webkit-perspective:300px;-webkit-transform-style:preserve-3d;-webkit-perspective-origin:bottom right;-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);-webkit-transform:translateZ( 50px);-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;-webkit-transform:translateZ( -50px);-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);-webkit-transform:rotateY( 90deg) translateZ( 50px);-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);-webkit-transform:rotateY(-90deg) translateZ( 50px);-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);-webkit-transform:rotateX( 90deg) translateZ( 50px);-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);-webkit-transform:rotateX(-90deg) translateZ( 50px);-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>
<div>{{CompatibilityTable}}</div>
<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 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="CSS/Using_CSS_transforms">Using CSS Transforms</a></li>
  <li>{{CSS_Reference:Transforms}}</li>
</ul>
Revert to this revision