backface-visibility

Werte

• visible – ein umgedrehtes Element ist gespiegelt sichtbar.
• hidden – ein dem Betrachter abgewandtes Element ist unsichtbar.

Initialwert: visible. Vererbt: nein. Gilt für: transformierbare Elemente.

Beispiele

Ein um 180° um die y-Achse gedrehtes Element:

<figure><div class="place"><div class="sample">Text</div></div><figcaption>visible</figcaption></figure>
<figure><div class="place"><div class="sample hide">Text</div></div><figcaption>hidden</figcaption></figure>

figure {
  display: inline-block;
  margin: 0 8px 8px 0;
  vertical-align: top;
}
figcaption { font: 12px/1.6 monospace; }
.place {
  width: 100px;
  height: 50px;
  outline: 1px dashed #999;
}
.sample {
  height: 100%;
  background: #ff9800;
  font: 700 20px/50px sans-serif;
  text-align: center;
  rotate: y 180deg;
}
.hide { backface-visibility: hidden; }

Eine Wendekarte: Beide Seiten liegen übereinander, die hintere ist vorab um 180° gedreht. Beim Überfahren dreht sich das ganze Innere der Karte und die Vorderseite kehrt dem Betrachter den Rücken zu:

<div class="card">
  <div class="flipper">
    <div class="side front">Vorderseite</div>
    <div class="side back">Rückseite</div>
  </div>
</div>

.card {
  width: 180px;
  height: 100px;
  perspective: 600px;
}
.flipper {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
.card:hover .flipper { transform: rotateY(180deg); }
.side {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  backface-visibility: hidden;
}
.front {
  background: #0088d1;
  color: #fff;
}
.back {
  background: #8bc34a;
  transform: rotateY(180deg);
}

Worauf Sie achten sollten

• Dreht sich das Elternelement und die Seiten sind seine Kinder, braucht das Elternelement transform-style: preserve-3d. Ohne das werden die Seiten in seine Ebene flachgedrückt und in Chrome und Firefox ist nach dem Wenden statt der Rückseite die gespiegelte Vorderseite zu sehen.
• Die Rückseite muss vorab um 180° gedreht sein (rotateY(180deg)), sonst würde auch sie nach dem Wenden der Karte dem Betrachter den Rücken zukehren.
• Setzen Sie das Überfahren auf die ruhende Hülle (.card:hover .flipper), nicht auf das gedrehte Element: Es wird beim Drehen schmaler, der Mauszeiger kann von ihm abrutschen und die Karte zuckt dann hin und her.
• Safari unterstützt die Eigenschaft ohne Präfix seit Version 15.4; ältere Versionen brauchten -webkit-backface-visibility: hidden.

Browserunterstützung

Baseline – weithin verfügbar: in allen gängigen Browsern seit März 2022, gilt als weithin verfügbar seit September 2024. Ab Version: Chrome 36, Firefox 16, Safari 15.4. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
perspective
transform
rotate
transition