Revision 238111 of backface-visibility

  • Revision slug: CSS/backface-visibility
  • Revision title: backface-visibility
  • Revision id: 238111
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

{{ SeeCompatTable() }}

Summary

The backface-visibility CSS property determines whether or not the back face of the element is visible when facing the user. The back face of an element always is a transparent background, letting, when visible, a mirror image of the front face be displayed.

There are cases when we do not want the front face of an element to be visible through the back face, like when doing a flipping card effect (setting two elements side-to-side).

  • {{ Xref_cssinitial() }} : visible
  • Applies to : any transformable element
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: same as specified value.

Syntax

backface-visibility: visibility

where :

visibility
Is a keyword indicating if the backface must be visible or not. It can have the following values:
  • visible meaning that the back face is visible, allowing the front face to be displayed mirrored;
  • hidden meaning that the back face is not visible, hiding the front face.

Examples

backface-visibility: visible; backface-visibility: hidden;
1
2
3
4
5
6
1
2
3
4
5
6

Though not opaque, the front sides don't let the
back faces of the hidden sides to be displayed.

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("16") }}
{{ CompatGeckoDesktop("10") }} {{ property_prefix('-moz') }}
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("16") }}
{{ CompatGeckoMobile("10") }} {{ property_prefix('-moz') }}
{{ CompatUnknown() }} {{ CompatNo() }} {{ CompatVersionUnknown() }} {{ property_prefix('-webkit') }}

 

See also

{{ languages( { "fr": "fr/CSS/backface-visibility" }) }}

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>backface-visibility</code> <a href="/en/CSS" title="CSS">CSS</a> property determines whether or not the back face of the element is visible when facing the user. The back face of an element always is a transparent background, letting, when visible, a mirror image of the front face be displayed.</p>
<p>There are cases when we do not want the front face of an element to be visible through the back face, like when doing a flipping card effect (setting two elements side-to-side).</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }} :</dfn> <code>visible</code></li>
  <li><dfn>Applies to :</dfn> any transformable element</li>
  <li><dfn>{{ Xref_cssinherited() }}:</dfn> no</li>
  <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}:</dfn> same as <a href="/en/CSS/specified_value" title="specified value">specified value</a>.</li>
</ul>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="eval">backface-visibility: <em>visibility</em>
</pre>
<p>where :</p>
<dl>
  <dt style="margin-left: 40px;">
    <em>visibility</em></dt>
  <dd style="margin-left: 40px;">
    Is a keyword indicating if the backface must be visible or not. It can have the following values:
    <ul>
      <li style="margin-left: 40px;"><code>visible</code> meaning that the back face is visible, allowing the front face to be displayed mirrored;</li>
      <li style="margin-left: 40px;"><code>hidden</code> meaning that the back face is not visible, hiding the front face.</li>
    </ul>
  </dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td><code>backface-visibility: visible;</code></td>
      <td><code>backface-visibility: hidden;</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:300px;-moz-transform-style:preserve-3d;-moz-perspective-origin:150% 150%;-moz-backface-visibility:visible;">
            <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: rotateY(-180deg) 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="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 );-moz-backface-visibility:hidden;">
              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:  rotateY(180deg)  translateZ( -50px );-moz-backface-visibility:hidden;">
              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 );-moz-backface-visibility:hidden;">
              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 );-moz-backface-visibility:hidden; ">
              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 );-moz-backface-visibility:hidden;">
              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 );-moz-backface-visibility:hidden;">
              6</div>
          </div>
        </div>
        <p>Though not opaque, the front sides don't let the<br>
          back faces of the hidden sides to be displayed.</p>
      </td>
    </tr>
  </tbody>
</table>
<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><a class="external" href="http://dev.w3.org/csswg/css3-3d-transforms/#backface-visibility-property" title="http://dev.w3.org/csswg/css3-3d-transforms/#backface-visibility-property">CSS 3D Transforms Level 3</a></td>
      <td>{{ Spec2('CSS3 3D Transforms') }}</td>
      <td> </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("16") }}<br>
          {{ CompatGeckoDesktop("10") }} {{ property_prefix('-moz') }}
        </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("16") }}<br>{{ CompatGeckoMobile("10") }} {{ property_prefix('-moz') }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatVersionUnknown() }} {{ property_prefix('-webkit') }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p> </p>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li><a href="/en/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
</ul>
{{ languages( { "fr": "fr/CSS/backface-visibility" }) }}
Revert to this revision