Propriété CSS backface-visibility

La backface-visibility propriété définit si la face arrière d'un élément doit être visible ou non. La face arrière est le côté arrière de la boîte, visible lorsque l'élément est tourné de 180 degrés autour de l'axe Y. Si l'élément est tourné, vous pouvez choisir d'afficher ou de masquer la face arrière à l'utilisateur. Deux valeurs définissent cette propriété : visible et hidden.

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

La valeur visible rend la face arrière visible pour l'utilisateur. La valeur hidden masque la face arrière.

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

Syntaxe

Syntaxe de la propriété CSS backface-visibility

css

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

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

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

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

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

Valeurs

Valeur	Description	Essayer
visible	La face arrière est visible. C'est 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 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 lorsqu'elle fait face à l'utilisateur.Elle définit la taille de la 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.

Propriété CSS backface-visibility ​

Syntaxe ​

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

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