--- title: backface-visibility slug: Web/CSS/backface-visibility tags: - CSS - Experimental - Propiedad CSS - Referencia translation_of: Web/CSS/backface-visibility ---

{{CSSRef}}{{SeeCompatTable}}

Resumen

La propiedad CSS backface-visibility 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.

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).

Esta propiedad no tiene efecto en transformaciones 2D, pues estos no tienen perspectiva.

{{cssinfo}}

Sintaxis

backface-visibility: visible;
backface-visibility: hidden;

Valores

Esta propiedad puede tener dos valores diferentes (y exclusivos):

Sintaxis formal

{{csssyntax}}

Ejemplos

Cubo con caras transparentes

Contenido HTML

<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>

Contenido 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;
}

Resultado

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

Especificaciones

Especificación Estatus Comentarios
{{SpecName('CSS3 Transforms', '#backface-visibility-property', 'backface-visibility')}} {{Spec2('CSS3 Transforms')}} Definición inicial

Compatibilidad de navegadores

{{CompatibilityTable}}

Característica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico 12{{property_prefix('-webkit')}} {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
{{CompatVersionUnknown}}		 {{CompatGeckoDesktop("10")}}{{property_prefix('-moz')}}
{{CompatGeckoDesktop("16")}}[1]		 10 15{{property_prefix('-webkit')}} {{CompatVersionUnknown}}{{property_prefix('-webkit')}}
Característica Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico 3.0{{property_prefix('-webkit')}} {{CompatVersionUnknown}}{{property_prefix('-webkit')}} {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
{{CompatVersionUnknown}}		 {{CompatGeckoMobile("10")}}{{property_prefix('-moz')}}
{{CompatGeckoMobile("16")}}[1]		 8.1
11{{property_prefix('-webkit')}}		 {{CompatVersionUnknown}}{{property_prefix('-webkit')}} {{CompatVersionUnknown}}{{property_prefix('-webkit')}}

[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 -webkit por razones de compatibilidad, bajo la preferencia layout.css.prefixes.webkit, con valor predeterminado de false. A partir de Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esta preferencia es true.

Véase también