backface-visibility

Experimental

Esta es una tecnolog铆a experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producci贸n.

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.

Valor inicialvisible
Applies totransformable elements
Heredableno
Valor calculadocomo se especifica
Animation typediscrete

Sintaxis

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

Valores

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

  • visible significa que la cara posterior es visible, permitiendo que la cara frontal se muestre invertida
  • hidden significa que la cara posterior no es visible, ocultando la cara frontal

Sintaxis formal

visible | (en-US) hidden

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

Especificaciones

Especificaci贸n Estatus Comentarios
CSS Transforms Level 1
La definici贸n de 'backface-visibility' en esta especificaci贸n.
Working Draft Definici贸n inicial

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Caracter铆stica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte b谩sico 12-webkit (en-US) (Yes)-webkit (en-US)
(Yes)
10 (10)-moz (en-US)
16 (16)[1]
10 15-webkit (en-US) (Yes)-webkit (en-US)
Caracter铆stica Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte b谩sico 3.0-webkit (en-US) (Yes)-webkit (en-US) (Yes)-webkit (en-US)
(Yes)
10.0 (10)-moz (en-US)
16.0 (16)[1]
8.1
11-webkit (en-US)
(Yes)-webkit (en-US) (Yes)-webkit (en-US)

[1] Adem谩s del soporte sin prefijo, Gecko 45.0 (Firefox 45.0 / Thunderbird 45.0 / SeaMonkey 2.42) 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 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) el valor predeterminado de esta preferencia es true.

V茅ase tambi茅n