Propriété CSS backface-visibility

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>

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>

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.

Support de Navigateurs

36.0+
12.0-35.0 -webkit-
16.0+
10.0-15.0 -moz-
4.0+
-webkit-
23.0+
15.0-22.0 -webkit-


Trouvez-vous cela utile?

Articles Associées