CSS backface-visibility

A propriedade CSS backface-visibility controla se a face traseira de um elemento é exibida quando esse elemento está voltado para longe do observador. Todo elemento possui duas faces: a frontal (o que você normalmente vê) e a traseira, que fica visível quando o elemento é rotacionado além de 90 graus em torno do eixo X ou Y no espaço 3D. Por padrão, a face traseira é uma imagem espelhada da frente, mas com essa propriedade você pode ocultá-la completamente.

Esta propriedade só tem efeito visível dentro de um contexto de transformação 3D — ou seja, quando o elemento (ou seu pai) é rotacionado usando transform com rotateX(), rotateY() ou rotate3d(), geralmente combinado com transform-style: preserve-3d no elemento pai. Ela aceita dois valores de palavra-chave:

visible (o padrão) — a face traseira é desenhada, aparecendo como uma versão espelhada da frente.
hidden — a face traseira não é desenhada. Quando o elemento ultrapassa a posição de perfil ao girar, ele desaparece em vez de mostrar o lado reverso.

O uso mais comum é criar interfaces de flip card (cartão com virada), onde dois elementos são empilhados de costas um para o outro e rotacionados 180 graus. Definir backface-visibility: hidden em ambos impede que a face traseira do lado frontal apareça, de modo que apenas o lado atualmente voltado para o observador é exibido.

A propriedade backface-visibility é uma das propriedades CSS3.

Valor Inicial	visible
Aplica-se a	Elementos transformáveis.
Herdado	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.backfaceVisibility = "hidden";

Sintaxe

Sintaxe do CSS backface-visibility

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

Nos exemplos abaixo, um quadrado é animado para girar em torno do eixo Y. Com visible, é possível ler o texto espelhado quando a caixa vira suas costas para você. Com hidden, a caixa desaparece durante a metade da rotação em que sua face traseira está voltada para você. Observe a diferença enquanto cada caixa gira.

Exemplo da propriedade backface-visibility com o valor "visible":

Exemplo do CSS backface-visibility com o 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>

Experimente Você Mesmo »

Exemplo da propriedade backface-visibility com o valor "hidden":

Exemplo do CSS backface-visibility com o 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>

Experimente Você Mesmo »

Criando um flip card

Um uso prático do backface-visibility é um cartão que vira para revelar seu outro lado ao passar o cursor. A frente e o verso são empilhados no mesmo lugar; hidden impede que a imagem espelhada da frente apareça depois que o cartão ultrapassa 90 graus.

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

Dicas e cuidados

backface-visibility não tem efeito em um layout plano (2D). O elemento deve fazer parte de uma transformação 3D — aplique transform-style: preserve-3d ao elemento pai e use perspective para que a rotação seja percebida como profundidade.
Em um flip card, defina backface-visibility: hidden em ambas as faces. Esquecer de aplicá-lo em uma das faces faz com que sua imagem espelhada apareça pelo outro lado.
A face traseira é um espelho verdadeiro da frente, portanto qualquer texto nela aparece invertido quando visible.
A propriedade não é animável — ela alterna estados instantaneamente — mas a rotação que revela ou oculta a face traseira pode ser animada com transform e animations CSS.

Valores

Valor	Descrição	Experimente
visible	A face traseira é visível. É o valor padrão.	Experimente »
hidden	A face traseira não é visível.	Experimente »
initial	Define a propriedade com seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Prática

O que a propriedade CSS backface-visibility faz?

Define se a face traseira de um elemento deve ou não ser visível quando está voltada para o usuário.Define o tamanho da fonte de um elemento.Define a cor da borda de um elemento.Impede que uma cópia invertida da face frontal de um elemento seja exibida.