Propriété CSS backface-visibility

❮ Précédent Suivant ❯

Backface-visibility est une propriété CSS qui définit si la face arrière d’un élément sera visible ou non. La face arrière d’un élément est une image miroir de devant. Si l'élément est tourné, vous pouvez décider d'afficher la face arrière à l'utilisateur ou non. Cette propriété est spécifie par deux valeurs: visible et hidden.

La valeur "visible" fait la face arrière visible à l'utilisateur. La valeur "hidden" fait la face arrière masquée effectivement.

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

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      .element {
      width: 200px;
      height: 200px;
      background: #666;
      color: #eee;
      backface-visibility: visible;
      -webkit-animation: element 2s infinite linear alternate; /* Safari 4.0 - 8.0 */
      animation: element 2s infinite linear alternate;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
      to {-webkit-transform: rotateY(180deg);}
      }
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété backface-visibility</h2>
    <div class="element">
      <h2>Bonjour,  monde!</h2>
    </div>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple si-dessous , on a spécifiée la valeur "visible".

Maintenant voyons un exemple, où l'élément est spécifié par la valeur "hidden".

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      .element {
      width: 200px;
      height: 200px;
      background: #1c87c9;
      color: #8ebf42;
      backface-visibility: hidden;
      -webkit-animation: element 2s infinite linear alternate; /* Safari 4.0 - 8.0 */
      animation: element 2s infinite linear alternate;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
      to {-webkit-transform: rotateY(180deg);}
      }
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la valeur hidden</h2>
    <div class="element">
      <h2>Bonjour monde!</h2>
    </div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
visible	La face arrière est visible. C'est la valeur initiale.
hidden	La face arrière n'est pas visible.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.