CSS backface-visibility

La propiedad CSS backface-visibility controla si la cara trasera de un elemento se muestra cuando ese elemento se gira alejándose del espectador. Cada elemento tiene dos caras: la delantera (lo que normalmente ves) y la trasera, que se vuelve visible cuando el elemento se rota más de 90 grados alrededor del eje X o Y en el espacio 3D. Por defecto, la cara trasera es una imagen especular de la delantera, pero con esta propiedad puedes ocultarla por completo.

Esta propiedad solo tiene efecto visible dentro de un contexto de transformación 3D — es decir, cuando el elemento (o su elemento padre) se rota usando transform con rotateX(), rotateY() o rotate3d(), generalmente combinado con transform-style: preserve-3d en el elemento padre. Acepta dos valores de palabra clave:

visible (el valor por defecto) — la cara trasera se dibuja, apareciendo como una versión en espejo de la delantera.
hidden — la cara trasera no se dibuja. Cuando el elemento gira más allá del canto, desaparece en lugar de mostrar su lado inverso.

El uso más común es construir interfaces de tarjetas giratorias (flip cards), donde dos elementos se apilan espalda con espalda y se rotan 180 grados. Establecer backface-visibility: hidden en ambos evita que la parte trasera de la cara delantera se transparente, de modo que solo se muestra el lado que en ese momento mira al espectador.

La propiedad backface-visibility es una de las propiedades de CSS3.

Valor inicial	visible
Se aplica a	Elementos transformables.
Heredable	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.backfaceVisibility = "hidden";

Sintaxis

Sintaxis de CSS backface-visibility

backface-visibility: visible | hidden | initial | inherit;

En los ejemplos siguientes, un cuadrado se anima girando alrededor del eje Y. Con visible, puedes leer el texto en espejo cuando la caja muestra su cara trasera. Con hidden, la caja desaparece durante la mitad de la rotación en la que su cara trasera mira hacia ti. Observa la diferencia mientras cada caja gira.

Ejemplo de la propiedad backface-visibility con el valor "visible":

Ejemplo de CSS backface-visibility con el valor visible

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .element {
        width: 200px;
        height: 200px;
        background: #666;
        color: #eee;
        backface-visibility: visible;
        transform-style: preserve-3d;
        -webkit-animation: element 2s infinite linear alternate;
        animation: element 2s infinite linear alternate;
      }
      @-webkit-keyframes element {
        to {
          -webkit-transform: rotateY(180deg);
        }
      }
      @keyframes element {
        to {
          transform: rotateY(180deg);
        }
      }
    </style>
  </head>
  <body>
    <h2>Backface-visibility property example</h2>
    <div class="element">
      <h2>Hello world!</h2>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad backface-visibility con el valor "hidden":

Ejemplo de CSS backface-visibility con el valor hidden

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .element {
        width: 200px;
        height: 200px;
        background: #1c87c9;
        color: #8ebf42;
        backface-visibility: hidden;
        transform-style: preserve-3d;
        -webkit-animation: element 2s infinite linear alternate;
        animation: element 2s infinite linear alternate;
      }
      @-webkit-keyframes element {
        to {
          -webkit-transform: rotateY(180deg);
        }
      }
      @keyframes element {
        to {
          transform: rotateY(180deg);
        }
      }
    </style>
  </head>
  <body>
    <h2>An example with hidden value</h2>
    <div class="element">
      <h2>Hello world!</h2>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Creación de una tarjeta giratoria

Un uso práctico de backface-visibility es una tarjeta que gira para revelar su otro lado al pasar el cursor. La cara delantera y la trasera se apilan en el mismo lugar; hidden evita que el lado inverso de la cara delantera se muestre una vez que la tarjeta supera los 90 grados.

<!DOCTYPE html>
<html>
  <head>
    <title>Flip card</title>
    <style>
      .scene {
        width: 200px;
        height: 260px;
        perspective: 800px;
      }
      .card {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.6s;
      }
      .scene:hover .card {
        transform: rotateY(180deg);
      }
      .card-face {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #fff;
        /* Hide the mirrored reverse of each face */
        backface-visibility: hidden;
      }
      .card-front {
        background: #1c87c9;
      }
      .card-back {
        background: #8ebf42;
        transform: rotateY(180deg);
      }
    </style>
  </head>
  <body>
    <div class="scene">
      <div class="card">
        <div class="card-face card-front">Front</div>
        <div class="card-face card-back">Back</div>
      </div>
    </div>
  </body>
</html>

Consejos y advertencias

backface-visibility no tiene ningún efecto en un diseño plano (2D). El elemento debe formar parte de una transformación 3D — dale al elemento padre transform-style: preserve-3d y usa perspective para que la rotación se perciba como profundidad.
En una tarjeta giratoria, establece backface-visibility: hidden en ambas caras. Olvidarlo en una de ellas permite que su imagen en espejo se transparente a través del otro lado.
La cara trasera es un espejo exacto de la delantera, por lo que cualquier texto en ella se lee al revés cuando está en visible.
La propiedad no es animable — cambia de estado de forma instantánea — pero la rotación que revela u oculta la cara trasera se puede animar con transform y animaciones CSS.

Valores

Valor	Descripción	Pruébalo
visible	La cara trasera es visible. Es el valor por defecto.	Pruébalo »
hidden	La cara trasera no es visible.	Pruébalo »
initial	Establece la propiedad en su valor por defecto.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad CSS backface-visibility?

Define si la cara trasera de un elemento debe ser visible o no cuando mira al usuario.Define el tamaño de fuente de un elemento.Define el color del borde de un elemento.Evita que se muestre una copia invertida de la cara delantera de un elemento.