mozilla

Revision 563695 of backface-visibility

  • Revision slug: Web/CSS/backface-visibility
  • Revision title: backface-visibility
  • Revision id: 563695
  • Created:
  • Creator: J-Mackerel
  • Is current revision? No
  • Comment Minor tweak to the table cells and sample iframe

Revision Content

{{ CSSRef("CSS Transforms") }}

{{ SeeCompatTable() }}

Summary

The CSS backface-visibility 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).

This property has no effect on 2D transforms as there is no perspective.

{{cssbox("backface-visibility")}}

Syntax

Formal syntax:  {{csssyntax("backface-visibility")}} 
backface-visibility: visibility

backface-visibility: visible
backface-visibility: hidden

Values

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

Cube with transparent faces

HTML Content

<table>
   <tbody>
      <tr>
         <th><code>backface-visibility: visible;</code>
         </th>
         <th><code>backface-visibility: hidden;</code>
         </th>
      </tr>
      <tr>
         <td>
            <div class="container">
               <div class="cube showbf">
                  <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>
            <p>All the faces are transparent and the three back faces are visible through the

front ones.</p>
         </td>
         <td>
            <div class="container">
               <div class="cube hidebf">
                  <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>
            <p>No face is opaque, but the three back faces are always hidden now.</p>
         </td>
      </tr>
   </tbody>
</table>

CSS Content

/*
Shorthand classes that will show or hide the back faces
of the six div "faces" that are contained within the div "cube"
*/
 .hidebf div {
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
}
.showbf div {
   backface-visibility: visible;
   -webkit-backface-visibility: visible;
}

/* Define the container div, the cube div, and a generic face */
 .container {
   width: 200px;
   height: 200px;
   margin: 75px 0 0 75px;
   border: none;
}
.cube {
   width: 100%;
   height: 100%;
   perspective: 300px;
   perspective-origin: 150% 150%;
   transform-style: preserve-3d;
   -webkit-perspective: 300px;
   -webkit-perspective-origin: 150% 150%;
   -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;
   margin: 0px;
   padding: 6px;
   font-family: sans-serif;
   text-align: left;
}

Result

{{ EmbedLiveSample('Cube_with_transparent_faces', 620, 460) }}

Specifications

Specification Status Comment
{{ SpecName('CSS3 Transforms', '#backface-visibility-property', 'backface-visibility') }} {{ 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 15{{ property_prefix('-webkit') }} {{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0{{ property_prefix('-webkit') }} {{ CompatUnknown() }} {{ CompatGeckoMobile("10") }}{{ property_prefix('-moz') }}
{{ CompatGeckoMobile("16") }}
{{ CompatUnknown() }} {{ CompatNo() }} {{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}

See also

Revision Source

<p>{{ CSSRef("CSS Transforms") }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <a href="/en-US/docs/CSS" title="CSS">CSS</a> <code>backface-visibility</code> 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>
<p>This property has no effect on 2D transforms as there is no perspective.</p>
<p>{{cssbox("backface-visibility")}}</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Formal syntax</a>:  {{csssyntax("backface-visibility")}} 
</pre>
<pre>
backface-visibility: <em>visibility</em>

backface-visibility: visible
backface-visibility: hidden
</pre>
<h3 id="Values">Values</h3>
<dl>
 <dt>
  <em>visibility</em></dt>
 <dd>
  Is a keyword indicating if the backface must be visible or not. It can have the following values:
  <ul>
   <li><code>visible</code> meaning that the back face is visible, allowing the front face to be displayed mirrored;</li>
   <li><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>
<h3 id="Cube_with_transparent_faces" name="Cube_with_transparent_faces">Cube with transparent faces</h3>
<h4 id="HTML_Content">HTML Content</h4>
<pre class="brush: html">
&lt;table&gt;
&nbsp;&nbsp; &lt;tbody&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;th&gt;&lt;code&gt;backface-visibility: visible;&lt;/code&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/th&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;th&gt;&lt;code&gt;backface-visibility: hidden;&lt;/code&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/th&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/tr&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="container"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="cube showbf"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="face front"&gt;1&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="face back"&gt;2&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="face right"&gt;3&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="face left"&gt;4&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="face top"&gt;5&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="face bottom"&gt;6&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;All the faces are transparent and the three back faces are visible through the

front ones.&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/td&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="container"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="cube hidebf"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="face front"&gt;1&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="face back"&gt;2&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="face right"&gt;3&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="face left"&gt;4&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="face top"&gt;5&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="face bottom"&gt;6&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;No face is opaque, but the three back faces are always hidden now.&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/td&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/tr&gt;
&nbsp;&nbsp; &lt;/tbody&gt;
&lt;/table&gt;</pre>
<h4 id="CSS_Content">CSS Content</h4>
<pre class="brush: css">
/*
Shorthand classes that will show or hide the back faces
of the six div "faces" that are contained within the div "cube"
*/
&nbsp;.hidebf div {
&nbsp;&nbsp; backface-visibility: hidden;
&nbsp;&nbsp; -webkit-backface-visibility: hidden;
}
.showbf div {
&nbsp;&nbsp; backface-visibility: visible;
&nbsp;&nbsp; -webkit-backface-visibility: visible;
}

/* Define the container div, the cube div, and a generic face */
&nbsp;.container {
&nbsp;&nbsp; width: 200px;
&nbsp;&nbsp; height: 200px;
&nbsp;&nbsp; margin: 75px 0 0 75px;
&nbsp;&nbsp; border: none;
}
.cube {
&nbsp;&nbsp; width: 100%;
&nbsp;&nbsp; height: 100%;
&nbsp;&nbsp; perspective: 300px;
&nbsp;&nbsp; perspective-origin: 150% 150%;
&nbsp;&nbsp; transform-style: preserve-3d;
&nbsp;&nbsp; -webkit-perspective: 300px;
&nbsp;&nbsp; -webkit-perspective-origin: 150% 150%;
&nbsp;&nbsp; -webkit-transform-style: preserve-3d;
}
.face {
&nbsp;&nbsp; display: block;
&nbsp;&nbsp; position: absolute;
&nbsp;&nbsp; width: 100px;
&nbsp;&nbsp; height: 100px;
&nbsp;&nbsp; border: none;
&nbsp;&nbsp; line-height: 100px;
&nbsp;&nbsp; font-family: sans-serif;
&nbsp;&nbsp; font-size: 60px;
&nbsp;&nbsp; color: white;
&nbsp;&nbsp; text-align: center;
}
/* Define each face based on direction */
&nbsp;.front {
&nbsp;&nbsp; background: rgba(0, 0, 0, 0.3);
&nbsp;&nbsp; transform: translateZ(50px);
&nbsp;&nbsp; -webkit-transform: translateZ(50px);
}
.back {
&nbsp;&nbsp; background: rgba(0, 255, 0, 1);
&nbsp;&nbsp; color: black;
&nbsp;&nbsp; transform: rotateY(180deg) translateZ(50px);
&nbsp;&nbsp; -webkit-transform: rotateY(180deg) translateZ(50px);
}
.right {
&nbsp;&nbsp; background: rgba(196, 0, 0, 0.7);
&nbsp;&nbsp; transform: rotateY(90deg) translateZ(50px);
&nbsp;&nbsp; -webkit-transform: rotateY(90deg) translateZ(50px);
}
.left {
&nbsp;&nbsp; background: rgba(0, 0, 196, 0.7);
&nbsp;&nbsp; transform: rotateY(-90deg) translateZ(50px);
&nbsp;&nbsp; -webkit-transform: rotateY(-90deg) translateZ(50px);
}
.top {
&nbsp;&nbsp; background: rgba(196, 196, 0, 0.7);
&nbsp;&nbsp; transform: rotateX(90deg) translateZ(50px);
&nbsp;&nbsp; -webkit-transform: rotateX(90deg) translateZ(50px)
}
.bottom {
&nbsp;&nbsp; background: rgba(196, 0, 196, 0.7);
&nbsp;&nbsp; transform: rotateX(-90deg) translateZ(50px);
&nbsp;&nbsp; -webkit-transform: rotateX(-90deg) translateZ(50px);
}

/* Make the table a little nicer */
th, p, td {
&nbsp;&nbsp; background-color: #EEEEEE;
   margin: 0px;
&nbsp;&nbsp; padding: 6px;
&nbsp;&nbsp; font-family: sans-serif;
&nbsp;&nbsp; text-align: left;
}</pre>
<h4 id="Result">Result</h4>
<p>{{ EmbedLiveSample('Cube_with_transparent_faces', 620, 460) }}</p>
<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', '#backface-visibility-property', 'backface-visibility') }}</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>15{{ property_prefix('-webkit') }}</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>Chrome for Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>3.0{{ property_prefix('-webkit') }}</td>
    <td>{{ CompatUnknown() }}</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