CSS backface-visibility

La proprietà CSS backface-visibility controlla se la faccia posteriore di un elemento viene mostrata quando quell'elemento è girato lontano dall'osservatore. Ogni elemento ha due facce: quella anteriore (ciò che normalmente vedi) e quella posteriore, che diventa visibile quando l'elemento viene ruotato oltre i 90 gradi attorno all'asse X o Y nello spazio 3D. Per impostazione predefinita, la faccia posteriore è un'immagine speculare di quella anteriore, ma con questa proprietà puoi nasconderla completamente.

Questa proprietà ha un effetto visibile solo all'interno di un contesto di trasformazione 3D — ovvero, quando l'elemento (o il suo genitore) viene ruotato usando transform con rotateX(), rotateY() o rotate3d(), solitamente combinato con transform-style: preserve-3d sul genitore. Accetta due valori chiave:

visible (il valore predefinito) — la faccia posteriore viene disegnata, apparendo come una versione speculare di quella anteriore.
hidden — la faccia posteriore non viene disegnata. Quando l'elemento supera la posizione di taglio, scompare invece di mostrare il lato inverso.

L'uso più comune è la creazione di interfacce a flip card, dove due elementi sono sovrapposti l'uno all'altro e ruotati di 180 gradi. Impostare backface-visibility: hidden su entrambi evita che la faccia posteriore del lato anteriore traspaia, in modo che venga mostrato solo il lato attualmente rivolto verso l'osservatore.

La proprietà backface-visibility è una delle proprietà CSS3.

Valore iniziale	visible
Si applica a	Elementi trasformabili.
Ereditata	No.
Animabile	No.
Versione	CSS3
Sintassi DOM	object.style.backfaceVisibility = "hidden";

Sintassi

Sintassi di CSS backface-visibility

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

Negli esempi seguenti, un quadrato viene animato per ruotare attorno all'asse Y. Con visible, puoi leggere il testo in forma speculare quando il riquadro gira la schiena verso di te. Con hidden, il riquadro scompare durante la metà della rotazione in cui la faccia posteriore è rivolta verso di te. Osserva la differenza mentre ogni riquadro ruota.

Esempio della proprietà backface-visibility con il valore "visible":

Esempio di CSS backface-visibility con il valore 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>

Provalo tu stesso »

Esempio della proprietà backface-visibility con il valore "hidden":

Esempio di CSS backface-visibility con il valore 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>

Provalo tu stesso »

Creare una flip card

Un uso pratico di backface-visibility è una carta che si capovolge per rivelare il lato opposto al passaggio del mouse. La faccia anteriore e quella posteriore sono sovrapposte nello stesso punto; hidden impedisce che l'immagine speculare del lato anteriore traspaia una volta che la carta supera i 90 gradi.

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

Consigli e avvertenze

backface-visibility non ha alcun effetto in un layout piatto (2D). L'elemento deve far parte di una trasformazione 3D — imposta transform-style: preserve-3d sul genitore e usa perspective affinché la rotazione appaia come profondità.
In una flip card, imposta backface-visibility: hidden su entrambe le facce. Dimenticarlo su una faccia permette alla sua immagine speculare di lampeggiare attraverso l'altro lato.
La faccia posteriore è un vero specchio di quella anteriore, quindi qualsiasi testo su di essa appare invertito quando il valore è visible.
La proprietà non è animabile — cambia stato istantaneamente — ma la rotazione che rivela o nasconde la faccia posteriore può essere animata con transform e le animazioni CSS.

Valori

Valore	Descrizione	Prova
visible	La faccia posteriore è visibile. È il valore predefinito.	Prova »
hidden	La faccia posteriore non è visibile.	Prova »
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dall'elemento genitore.

Esercitati

Pratica

Cosa fa la proprietà CSS backface-visibility?

Definisce se la faccia posteriore di un elemento deve essere visibile quando è rivolta verso l'utente.Definisce la dimensione del carattere di un elemento.Definisce il colore del bordo di un elemento.Impedisce che una copia invertita della faccia anteriore di un elemento venga visualizzata.