CSS backface-visibility

La propriété CSS backface-visibility contrôle si la face arrière d'un élément est affichée lorsque cet élément est tourné à l'opposé du spectateur. Chaque élément possède deux faces : la face avant (ce que vous voyez normalement) et la face arrière, qui devient visible lorsque l'élément est pivoté de plus de 90 degrés autour de l'axe X ou Y dans l'espace 3D. Par défaut, la face arrière est le reflet miroir de la face avant, mais avec cette propriété, vous pouvez la masquer entièrement.

Cette propriété n'a un effet visible qu'au sein d'un contexte de transformation 3D — c'est-à-dire lorsque l'élément (ou son parent) est pivoté à l'aide de transform avec rotateX(), rotateY(), ou rotate3d(), généralement combiné avec transform-style: preserve-3d sur le parent. Elle accepte deux valeurs de type mot-clé :

visible (valeur par défaut) — la face arrière est dessinée et apparaît comme une version en miroir de la face avant.
hidden — la face arrière n'est pas dessinée. Lorsque l'élément dépasse l'angle de 90 degrés, il disparaît au lieu d'afficher sa face inversée.

L'utilisation la plus courante consiste à créer des interfaces de carte retournable (flip card), où deux éléments sont empilés dos à dos et pivotés de 180 degrés. Appliquer backface-visibility: hidden sur les deux empêche la face arrière de la face avant de transparaître, de sorte que seul le côté actuellement face au spectateur est affiché.

La propriété backface-visibility fait partie des propriétés CSS3.

Valeur initiale	visible
S'applique à	Éléments transformables.
Hérité	Non.
Animatable	Non.
Version	CSS3
Syntaxe DOM	object.style.backfaceVisibility = "hidden";

Syntaxe

Syntaxe de CSS backface-visibility

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

Dans les exemples ci-dessous, un carré est animé pour tourner autour de l'axe Y. Avec visible, vous pouvez lire le texte en miroir inversé lorsque la boîte vous tourne le dos. Avec hidden, la boîte disparaît pendant la moitié de la rotation où sa face arrière vous fait face. Observez la différence au fur et à mesure que chaque boîte tourne.

Exemple de la propriété backface-visibility avec la valeur "visible" :

Exemple de CSS backface-visibility avec la valeur 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>

Essayez vous-même »

Exemple de la propriété backface-visibility avec la valeur "hidden" :

Exemple CSS backface-visibility avec la valeur 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>

Essayez vous-même »

Créer une carte retournable

Une utilisation pratique de backface-visibility est une carte qui se retourne pour révéler son autre côté au survol. La face avant et la face arrière sont empilées au même endroit ; hidden empêche la face inversée de la face avant de transparaître une fois que la carte dépasse 90 degrés.

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

Conseils et points d'attention

backface-visibility n'a aucun effet dans une mise en page plate (2D). L'élément doit faire partie d'une transformation 3D — appliquez transform-style: preserve-3d sur le parent et utilisez perspective pour que la rotation soit perçue comme une profondeur.
Dans une carte retournable, appliquez backface-visibility: hidden sur les deux faces. L'oublier sur l'une d'elles laisse son reflet miroir apparaître en transparence de l'autre côté.
La face arrière est un vrai miroir de la face avant, donc tout texte qu'elle contient apparaît inversé lorsque visible.
La propriété n'est pas animatable — elle change d'état instantanément — mais la rotation qui révèle ou masque la face arrière peut être animée avec transform et les animations CSS.

Valeurs

Valeur	Description	Essayer
visible	La face arrière est visible. Il s'agit de la valeur par défaut.	Essayer »
hidden	La face arrière n'est pas visible.	Essayer »
initial	Définit la propriété à sa valeur par défaut.
inherit	Hérite de la propriété de son élément parent.

Pratique

Que fait la propriété CSS backface-visibility ?

Elle définit si la face arrière d'un élément doit être visible ou non lorsqu'elle fait face à l'utilisateur.Elle définit la taille de police d'un élément.Elle définit la couleur de la bordure d'un élément.Elle empêche l'affichage d'une copie inversée de la face avant d'un élément.