Revision 21866 of perspective

  • Revision slug: CSS/perspective
  • Revision title: perspective
  • Revision id: 21866
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 3 words added, 3 words removed

Revision Content

Summary

The perspective CSS property determines the distance between the z=0 plane to the user.

Using this property with a value different than 0 and none creates a new stacking context.

  • {{ Xref_cssinitial() }} : none
  • Applies to : block and inline elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: same as specified value.

Syntax

perspective: none     or
perspective: depth

where :

none
Is a keyword indicating that no perspective transform has to be applied.
depth
Is a {{ xref_csslength() }} giving the distance from the user to the z=0 plane. It used to apply a perspective transform to the element and its content. If it 0 or a negative value, no perspective transform is applied.

Examples

perspective:150px; perspective:300px; perspective:600px;
   
1
2
3
4
5
6
   
1
2
3
4
5
6
   
1
2
3
4
5
6

Specifications

Specification Status Comment
CSS 3D Transforms Level 3 {{ Spec2('CSS3 3D Transforms') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 12{{ property_prefix('-webkit') }} {{ CompatGeckoDesktop("10") }}{{ property_prefix('-moz') }} 10{{ property_prefix('-ms') }} {{ 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') }} {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}

See also

Revision Source

<h2>Summary</h2>
<p>The <code>perspective</code> <a href="/en/CSS" title="CSS">CSS</a> property determines the distance between the z=0 plane to the user.</p>
<p>Using this property with a value different than <code>0</code> and <code>none</code> creates a new <a href="/en/Understanding_CSS_z-index/The_stacking_context" title="The stacking context">stacking context</a>.</p>
<ul> <li>{{ Xref_cssinitial() }} : <code>none</code></li> <li>Applies to : block and inline elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: same as <a href="/en/CSS/specified_value" title="specified value">specified value</a>.</li>
</ul><h2 name="Syntax">Syntax</h2>
<pre class="eval">perspective: none     <em>or</em>
perspective: <span style="font-style: italic;">depth</span>
</pre>
<p>where :</p>
<dl> <dt style="margin-left: 40px;"><code>none</code></dt> <dd style="margin-left: 40px;">Is a keyword indicating that no perspective transform has to be applied.</dd> <dt style="margin-left: 40px;"><em>depth</em></dt> <dd style="margin-left: 40px;">Is a {{ xref_csslength() }} giving the distance from the user to the z=0 plane. It used to apply a perspective transform to the element and its content. If it <code>0</code> or a negative value, no perspective transform is applied.</dd>
</dl><h2 name="Examples">Examples</h2>
<div> <table class="standard-table"> <tbody> <tr> <td><code>perspective:150px;</code></td> <td><code>perspective:300px;</code></td> <td><code>perspective:600px;</code></td> </tr> <tr> <td> <div class="container" style="width:200px;height:200px;margin:75px 0 0 75px;border:none;"> <div class="cube" style="width:100%;height:100%;-moz-perspective:150px;-moz-transform-style:preserve-3d;-moz-perspective-origin:150% 150%;"> <div class="middle" style="display: block;position: absolute;width: 100px;height: 100px;border: 1px dashed black;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: transparent;">   </div> <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:200px;height:200px;margin:75px 0 0 75px;border:none;"> <div class="cube" style="width:100%;height:100%;-moz-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspective-origin:150% 150%;"> <div class="middle" style="display: block;position: absolute;width: 100px;height: 100px;border: 1px dashed black;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: transparent;">   </div> <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:200px;height:200px;margin:75px 0 0 75px;border:none;"> <div class="cube" style="width:100%;height:100%;-moz-perspective:600px;-moz-transform-style:preserve-3d;-moz-perspective-origin:150% 150%;"> <div class="middle" style="display: block;position: absolute;width: 100px;height: 100px;border: 1px dashed black;line-height: 100px;font-family: arial, sans-serif;font-size: 60px;color: white;text-align: center;background: transparent;">   </div> <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 name="Specifications">Specifications</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://dev.w3.org/csswg/css3-3d-transforms/#perspective-property" title="http://dev.w3.org/csswg/css3-3d-transforms/#perspective-property">CSS 3D Transforms Level 3</a></td> <td>{{ Spec2('CSS3 3D Transforms') }}</td> <td> </td> </tr> </tbody>
</table>
<h2>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') }}</td> <td>10{{ property_prefix('-ms') }}</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') }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td> </tr> </tbody> </table>
</div>
<h2 name="See_also">See also</h2>
<ul> <li><a href="/en/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
</ul>
Revert to this revision