CSS-Eigenschaft backface-visibility

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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.