W3docs
es
Iniciar sesión

Propiedad CSS backface-visibility

The backface-visibility defines whether the back face of an element is visible to the user or hidden. Find some examples and try them for yourself.

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 inicialvisible
Se aplica aElementos transformables.
HeredableNo.
AnimableNo.
VersiónCSS3
Sintaxis DOMobject.style.backfaceVisibility = "hidden";

Sintaxis

Sintaxis de CSS backface-visibility

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

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

Ejemplo de CSS backface-visibility con 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 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 »

Valores

ValorDescripciónProbar
visibleLa cara posterior es visible. Es el valor predeterminado.Probar »
hiddenLa cara posterior no es visible.Probar »
initialEstablece la propiedad en su valor predeterminado.
inheritHereda la propiedad de su elemento padre.

Práctica

Práctica

¿Qué hace la propiedad CSS backface-visibility?