CSS-Eigenschaft backface-visibility

Die CSS-Eigenschaft backface-visibility definiert ob die Rückfläche des Elements angezeigt werden soll oder nicht. Die Rückfläche des Elements ist ein Spiegelbild der Vorderseite. Wenn das Element gedreht wird, können Sie beschließen, die Rückseite des Elements dem Benutzer anzuzeigen, oder nicht. Diese Eigenschaft kann zwei Werte haben: visible and hidden.

Der Wert "visible" lässt dem Benutzer die Rückseite des Elements zu sehen. Der Wert "hidden" blendet die Rückseite aus.

Anfangswert visible
Gilt für Umwandelbare Elemente
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.backfaceVisibility = "hidden";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Beispiel für die Eigenschaft backface-visibility</h2>
    <div class="element">
      <h2>Hallo Welt!</h2>
    </div>
  </body>
</html>

Im angegebenen Beispiel der Wert "visible" wurde verwendet.

Jetzt betrachen wir ein Beispiel mit dem Wert "hidden".

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Ein Beispiel für den Wert hidden</h2>
    <div class="element">
      <h2>Hallo Welt!</h2>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
visible Die Rückseite wird angezeigt. Es ist voreingestellter Wert.
hidden Die Rückseite ist verborgen.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

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


Finden Sie das nützlich?

Ähnliche Artikel