Propiedad CSS backface-visibility

La propiedad backface-visibility define si la cara posterior de un elemento debe ser visible o no. La cara posterior es el lado trasero de la caja, visible cuando el elemento se rota 180 grados alrededor del eje Y. Si el elemento está rotado, puedes elegir mostrar la cara posterior al usuario u ocultarla. Dos valores especifican esta propiedad: visible y hidden.

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

El valor visible hace que la cara posterior sea visible para el usuario. El valor hidden oculta la cara posterior.

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

css

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

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

Ejemplo de CSS backface-visibility con valor visible

html

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

Try it Yourself »

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

Ejemplo de CSS backface-visibility con valor hidden

html

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

Try it Yourself »

Valores

Valor	Descripción	Probar
visible	La cara posterior es visible. Es el valor predeterminado.	Probar »
hidden	La cara posterior no es visible.	Probar »
initial	Establece la propiedad en su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad CSS backface-visibility?

Define si la cara posterior de un elemento debe ser visible o no cuando se enfrenta 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 frontal de un elemento.

Propiedad CSS backface-visibility ​

Sintaxis ​

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

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