CSS backface-visibility

Die CSS-Eigenschaft backface-visibility steuert, ob die Rückseite eines Elements angezeigt wird, wenn das Element vom Betrachter abgewandt ist. Jedes Element hat zwei Seiten: die Vorderseite (die normalerweise sichtbar ist) und die Rückseite, die sichtbar wird, wenn das Element im 3D-Raum um mehr als 90 Grad um die X- oder Y-Achse gedreht wird. Standardmäßig ist die Rückseite ein Spiegelbild der Vorderseite, aber mit dieser Eigenschaft können Sie sie vollständig ausblenden.

Diese Eigenschaft hat nur dann eine sichtbare Wirkung in einem 3D-Transformationskontext — das heißt, wenn das Element (oder sein Elternelement) mit transform und rotateX(), rotateY() oder rotate3d() rotiert wird, üblicherweise in Kombination mit transform-style: preserve-3d am Elternelement. Sie akzeptiert zwei Schlüsselwortwerte:

visible (der Standardwert) — die Rückseite wird gezeichnet und erscheint als gespiegelte Version der Vorderseite.
hidden — die Rückseite wird nicht gezeichnet. Wenn das Element über die Kante hinaus dreht, verschwindet es, anstatt seine Rückseite anzuzeigen.

Die häufigste Verwendung ist das Erstellen von Flip-Card-Oberflächen, bei denen zwei Elemente Rücken an Rücken gestapelt und um 180 Grad gedreht werden. Das Setzen von backface-visibility: hidden auf beiden verhindert, dass die Rückseite der Vorderseite durchscheint, sodass nur die dem Betrachter zugewandte Seite angezeigt wird.

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

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

Syntax

Syntax von CSS backface-visibility

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

In den folgenden Beispielen wird ein Quadrat animiert, um sich um die Y-Achse zu drehen. Mit visible können Sie den Text spiegelverkehrt lesen, wenn das Feld seine Rückseite zu Ihnen wendet. Mit hidden verschwindet das Feld in der Hälfte der Drehung, wenn seine Rückseite zu Ihnen zeigt. Beobachten Sie den Unterschied, wenn sich jedes Feld dreht.

Beispiel der backface-visibility-Eigenschaft mit dem Wert "visible":

Beispiel von CSS backface-visibility mit dem Wert visible

<!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>

Probier es selbst »

Beispiel der backface-visibility-Eigenschaft mit dem Wert "hidden":

Beispiel CSS backface-visibility mit dem Wert hidden

<!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>

Probier es selbst »

Eine Flip-Card erstellen

Eine praktische Verwendung von backface-visibility ist eine Karte, die beim Überfahren mit der Maus ihre andere Seite zeigt. Vorder- und Rückseite sind an derselben Stelle gestapelt; hidden verhindert, dass die gespiegelte Rückseite der Vorderseite durchscheint, sobald die Karte mehr als 90 Grad dreht.

<!DOCTYPE html>
<html>
  <head>
    <title>Flip card</title>
    <style>
      .scene {
        width: 200px;
        height: 260px;
        perspective: 800px;
      }
      .card {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.6s;
      }
      .scene:hover .card {
        transform: rotateY(180deg);
      }
      .card-face {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #fff;
        /* Hide the mirrored reverse of each face */
        backface-visibility: hidden;
      }
      .card-front {
        background: #1c87c9;
      }
      .card-back {
        background: #8ebf42;
        transform: rotateY(180deg);
      }
    </style>
  </head>
  <body>
    <div class="scene">
      <div class="card">
        <div class="card-face card-front">Front</div>
        <div class="card-face card-back">Back</div>
      </div>
    </div>
  </body>
</html>

Tipps und Fallstricke

backface-visibility hat keine Wirkung in einem flachen (2D) Layout. Das Element muss Teil einer 3D-Transformation sein — geben Sie dem Elternelement transform-style: preserve-3d und verwenden Sie perspective, damit die Rotation als Tiefe wahrgenommen wird.
Setzen Sie bei einer Flip-Card backface-visibility: hidden auf beide Seiten. Wenn Sie es bei einer Seite vergessen, kann deren Spiegelbild durch die andere Seite flackern.
Die Rückseite ist ein echtes Spiegelbild der Vorderseite, daher erscheint jeder Text darauf bei visible spiegelverkehrt.
Die Eigenschaft ist nicht animierbar — sie wechselt sofort den Zustand — aber die Rotation, die die Rückseite enthüllt oder verbirgt, kann mit transform und CSS-Animationen animiert werden.

Werte

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

Übung

Was bewirkt die CSS-Eigenschaft backface-visibility?

Sie legt fest, ob die Rückseite eines Elements sichtbar sein soll, wenn sie dem Benutzer zugewandt ist.Sie legt die Schriftgröße eines Elements fest.Sie legt die Farbe des Rahmens eines Elements fest.Sie verhindert, dass eine gespiegelte Kopie der Vorderseite eines Elements angezeigt wird.