path: root/files/es/web/css/backface-visibility/index.html

---
title: backface-visibility
slug: Web/CSS/backface-visibility
tags:
  - CSS
  - Experimental
  - Propiedad CSS
  - Referencia
translation_of: Web/CSS/backface-visibility
---
<p>{{CSSRef}}{{SeeCompatTable}}</p>

<h2 id="Resumen">Resumen</h2>

<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>backface-visibility</code></strong> determina si la cara posterior de un elemento es visible de frente al usuario. La cara posterior de un elemento siempre es un fondo transparente, permitiendo, cuando es visible, que se muestre una imagen de espejo de la cara frontal.</p>

<p>Hay casos en los que no queremos que la cara frontal de un elemento sea visible a través de la cara posterior, como cuando se hace el efecto de voltear una tarjeta (estableciendo dos elementos lado a lado).</p>

<p>Esta propiedad no tiene efecto en transformaciones 2D, pues estos no tienen perspectiva.</p>

<p>{{cssinfo}}</p>

<h2 id="Sintaxis">Sintaxis</h2>

<pre class="brush: css">backface-visibility: visible;
backface-visibility: hidden;
</pre>

<h3 id="Valores">Valores</h3>

<p>Esta propiedad puede tener dos valores diferentes (y exclusivos):</p>

<ul>
 <li><code>visible</code> significa que la cara posterior es visible, permitiendo que la cara frontal se muestre invertida</li>
 <li><code>hidden</code> significa que la cara posterior no es visible, ocultando la cara frontal</li>
</ul>

<h3 id="Sintaxis_formal">Sintaxis formal</h3>

<dl>
</dl>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Ejemplos">Ejemplos</h2>

<h3 id="Cubo_con_caras_transparentes">Cubo con caras transparentes</h3>

<h4 id="Contenido_HTML">Contenido HTML</h4>

<pre class="brush: html">&lt;table&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;th&gt;&lt;code&gt;backface-visibility: visible;&lt;/code&gt;&lt;/th&gt;
      &lt;th&gt;&lt;code&gt;backface-visibility: hidden;&lt;/code&gt;&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;div class="container"&gt;
          &lt;div class="cube showbf"&gt;
            &lt;div class="face front"&gt;1&lt;/div&gt;
            &lt;div class="face back"&gt;2&lt;/div&gt;
            &lt;div class="face right"&gt;3&lt;/div&gt;
            &lt;div class="face left"&gt;4&lt;/div&gt;
            &lt;div class="face top"&gt;5&lt;/div&gt;
            &lt;div class="face bottom"&gt;6&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;p&gt;All the faces are transparent and the three back faces are visible through the front ones.&lt;/p&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;div class="container"&gt;
          &lt;div class="cube hidebf"&gt;
            &lt;div class="face front"&gt;1&lt;/div&gt;
            &lt;div class="face back"&gt;2&lt;/div&gt;
            &lt;div class="face right"&gt;3&lt;/div&gt;
            &lt;div class="face left"&gt;4&lt;/div&gt;
            &lt;div class="face top"&gt;5&lt;/div&gt;
            &lt;div class="face bottom"&gt;6&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;p&gt;No face is opaque, but the three back faces are always hidden now.&lt;/p&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</pre>

<h4 id="Contenido_CSS">Contenido CSS</h4>

<pre class="brush: css">/* Shorthand classes that will show or hide the three back faces of the "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: 150px;
  height: 150px;
  margin: 75px 0 0 75px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  perspective: 550px;
  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;
}</pre>

<h4 id="Resultado">Resultado</h4>

<p>{{EmbedLiveSample('Cube_with_transparent_faces', 620, 460)}}</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estatus</th>
   <th scope="col">Comentarios</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transforms', '#backface-visibility-property', 'backface-visibility')}}</td>
   <td>{{Spec2('CSS3 Transforms')}}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>12{{property_prefix('-webkit')}}</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
    {{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("10")}}{{property_prefix('-moz')}}<br>
    {{CompatGeckoDesktop("16")}}<sup>[1]</sup></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>Característica</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>3.0{{property_prefix('-webkit')}}</td>
   <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
    {{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("10")}}{{property_prefix('-moz')}}<br>
    {{CompatGeckoMobile("16")}}<sup>[1]</sup></td>
   <td>8.1<br>
    <a href="https://msdn.microsoft.com/en-us/library/ie/hh772262(v=vs.85).aspx">11</a>{{property_prefix('-webkit')}}</td>
   <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td>
   <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Además del soporte sin prefijo, Gecko 45.0 {{geckoRelease("45.0")}} añadió sopore para una versión de la propiedad con prefijo <code>-webkit</code> por razones de compatibilidad, bajo la preferencia <code>layout.css.prefixes.webkit</code>, con valor predeterminado de <code>false</code>. A partir de Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esta preferencia es <code>true</code>.</p>

<h2 id="Véase_también">Véase también</h2>

<ul>
 <li><a href="/es/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">Uso de CSS transforms</a></li>
</ul>