CSS backface-visibility-Eigenschaft

Die backface-visibility-Eigenschaft definiert, ob die Rückseite eines Elements sichtbar sein soll oder nicht. Die Rückseite ist die Rückseite der Box, die sichtbar wird, wenn das Element um 180 Grad um die Y-Achse gedreht wird. Wenn das Element gedreht ist, können Sie entscheiden, ob die Rückseite für den Benutzer angezeigt oder ausgeblendet wird. Zwei Werte legen diese Eigenschaft fest: visible und hidden.

Die backface-visibility-Eigenschaft ist eine der CSS3-Eigenschaften.

Der Wert visible macht die Rückseite für den Benutzer sichtbar. Der Wert hidden blendet die Rückseite aus.

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

Syntax

Syntax der CSS backface-visibility-Eigenschaft

css

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

Beispiel für die backface-visibility-Eigenschaft mit dem Wert „visible“:

CSS-Beispiel für backface-visibility mit dem Wert 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 »

Beispiel für die backface-visibility-Eigenschaft mit dem Wert „hidden“:

CSS-Beispiel für backface-visibility mit dem Wert 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 »

Werte

Wert	Beschreibung	Ausführen
visible	Die Rückseite ist sichtbar. Dies ist der Standardwert.	Ausführen »
hidden	Die Rückseite ist nicht sichtbar.	Ausführen »
initial	Legt die Eigenschaft auf ihren Standardwert fest.
inherit	Erbt die Eigenschaft vom Elternelement.

Praxis

Was bewirkt die CSS-Eigenschaft backface-visibility?

Sie legt fest, ob die Rückseite eines Elements für den Benutzer sichtbar sein soll oder nicht.Sie definiert die Schriftgröße eines Elements.Sie definiert die Farbe des Rahmens eines Elements.Sie verhindert, dass ein invertiertes Abbild der Vorderseite eines Elements angezeigt wird.

CSS backface-visibility-Eigenschaft ​

Syntax ​

Beispiel für die backface-visibility-Eigenschaft mit dem Wert „visible“: ​

Beispiel für die backface-visibility-Eigenschaft mit dem Wert „hidden“: ​