La Propiedad BACKFACE-VISIBILITY

La propiedad backface-visibility en CSS determina si la cara posterior de un elemento debe ser visible cuando el elemento está rotado en el espacio 3D.

La propiedad backface-visibility en CSS determina si la cara posterior de un elemento debe ser visible cuando el elemento está rotado en el espacio 3D. En esencia, te permite controlar si quieres que la parte trasera de un elemento se oculte o se muestre cuando se le aplica una transformación 3D, como una rotación.

Sintaxis Básica

La sintaxis básica para usar la propiedad backface-visibility es la siguiente:

CSS
 
selector {
  backface-visibility: valor;
}

Donde selector es el elemento HTML al que quieres controlar la visibilidad de la cara posterior y valor puede ser uno de los siguientes:

Valores de la Propiedad backface-visibility

La propiedad backface-visibility puede tomar dos valores principales:

1. visible

Este es el valor predeterminado. Indica que la cara posterior del elemento es visible cuando el elemento está rotado en el espacio 3D.

2. hidden

Este valor indica que la cara posterior del elemento no es visible cuando el elemento está rotado en el espacio 3D. Si el elemento está rotado de tal manera que la cara posterior está mirando hacia el espectador, no se mostrará nada.

Prerrequisitos: Transformaciones 3D

Es importante entender que backface-visibility solo tiene efecto cuando se aplican transformaciones 3D al elemento, como rotaciones en los ejes X o Y (por ejemplo, transform: rotateY(180deg);). Para que estas transformaciones 3D sean perceptibles, a menudo se necesita establecer una perspectiva en el elemento padre usando la propiedad perspective.

Ejemplos Prácticos

Ejemplo 1: Tarjeta que se Voltea (Backface Oculta)

Este es un caso de uso común para backface-visibility: hidden. Imagina una tarjeta con contenido diferente en el anverso y el reverso. Cuando la tarjeta se voltea, no queremos ver el contenido del reverso reflejado antes de que la rotación se complete.

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor-tarjeta {
    width: 200px;
    height: 300px;
    perspective: 800px; /* Necesario para la transformación 3D */
  }

  .tarjeta {
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d; /* Permite que los elementos hijos tengan transformaciones 3D */
  }

  .contenedor-tarjeta:hover .tarjeta {
    transform: rotateY(180deg);
  }

  .cara {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Oculta la cara posterior */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: white;
  }

  .anverso {
    background-color: blue;
  }

  .reverso {
    background-color: green;
    transform: rotateY(180deg); /* Rota el reverso para que inicialmente esté oculto */
  }
</style>
</head>
<body>

  <div class="contenedor-tarjeta">
    <div class="tarjeta">
      <div class="cara anverso">Anverso</div>
      <div class="cara reverso">Reverso</div>
    </div>
  </div>

  <p>Pasa el ratón por encima de la tarjeta para voltearla.</p>

</body>
</html>

En este ejemplo:

  • El .contenedor-tarjeta establece la perspectiva para la escena 3D.
  • El .tarjeta contiene las dos caras y se rota al pasar el ratón.
  • Las clases .anverso y .reverso representan las caras delantera y trasera de la tarjeta.
  • backface-visibility: hidden; asegura que cuando la tarjeta se voltea, la cara que está mirando hacia atrás no sea visible, creando un efecto de volteo limpio.

Ejemplo 2: Tarjeta que se Voltea (Backface Visible)

Si eliminamos o comentamos la línea backface-visibility: hidden; del ejemplo anterior, verás cómo se comporta la tarjeta:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  /* ... (estilos del ejemplo anterior, excepto la línea backface-visibility) ... */
  .cara {
    position: absolute;
    width: 100%;
    height: 100%;
    /* backface-visibility: hidden; */ /* Comentado para mostrar la diferencia */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: white;
  }
  /* ... (otros estilos) ... */
</style>
</head>
<body>

  <div class="contenedor-tarjeta">
    <div class="tarjeta">
      <div class="cara anverso">Anverso</div>
      <div class="cara reverso">Reverso</div>
    </div>
  </div>

  <p>Pasa el ratón por encima de la tarjeta para voltearla (backface visible).</p>

</body>
</html>

En este caso, al pasar el ratón, verás el contenido del "Reverso" reflejado o distorsionado mientras la tarjeta está en proceso de rotación, lo que generalmente no es el comportamiento deseado para un efecto de volteo.

La Propiedad perspective

La propiedad perspective se aplica al elemento padre y define la distancia entre el plano Z=0 (donde reside el usuario) y el plano donde se dibujan los elementos 3D. Un valor más bajo crea una perspectiva más pronunciada (los objetos parecen más pequeños cuanto más lejos están), mientras que un valor más alto hace que la perspectiva sea menos intensa.

En los ejemplos anteriores, perspective: 800px; en .contenedor-tarjeta es lo que permite que la rotación 3D de la tarjeta sea visible.

Casos de Uso Comunes

  • Efectos de volteo de tarjetas: Mostrar información adicional al interactuar con una tarjeta (por ejemplo, al pasar el ratón o hacer clic).
  • Transiciones 3D: Crear animaciones donde los elementos giran o se voltean para revelar contenido nuevo.
  • Juegos y experiencias interactivas: Ocultar la parte trasera de objetos 3D para una apariencia más realista.
  • Elementos con dos caras: Diseñar elementos que tienen contenido diferente en el anverso y el reverso.

Consideraciones

  • backface-visibility solo afecta a las transformaciones 3D. No tiene ningún efecto en elementos 2D.
  • Asegúrate de que el elemento padre tenga establecida la propiedad transform-style: preserve-3d; para que los elementos hijos puedan participar en la escena 3D.
  • La propiedad perspective es crucial para que las transformaciones 3D sean visibles. Ajusta su valor según el efecto deseado.

Compatibilidad del Navegador

La propiedad backface-visibility tiene buena compatibilidad con los navegadores modernos. Sin embargo, es recomendable verificar la compatibilidad con navegadores más antiguos si es necesario. Puedes consultar sitios como "Can I Use" para obtener la información más actualizada.

Conclusión

La propiedad backface-visibility es una herramienta esencial para crear efectos 3D convincentes en CSS. Al permitirte ocultar la cara posterior de los elementos rotados, puedes lograr animaciones más limpias y realistas, especialmente en efectos de volteo y revelado de contenido. ¡Experimenta con esta propiedad junto con las transformaciones 3D para añadir una nueva dimensión a tus diseños web!