Sichtbarkeit der Rückseite - CSS-Tricks

Die backface-visibilityEigenschaft bezieht sich auf 3D-Transformationen. Mit 3D-Transformationen können Sie ein Element so drehen, dass das, was wir als „Vorderseite“ eines Elements betrachten, nicht mehr zum Bildschirm zeigt. Dies würde beispielsweise ein Element vom Bildschirm wegklappen:

.flip ( transform: rotateY(180deg); )

Es sieht so aus, als hätten Sie es mit einem Spatel aufgenommen und wie einen Pfannkuchen umgedreht. Das liegt daran, dass der Standardwert für backface-visibilityist visible. Anstatt sichtbar zu sein, können Sie es auch ausblenden.

.flip ( transform: rotateY(180deg); backface-visibility: hidden; )

Einfaches Beispiel:

Siehe den Pen FjwGA von Chris Coyier (@chriscoyier) auf CodePen.

Dies ist nützlich, wenn Sie 3D-Effekte ausführen. Zum Beispiel:

Funktioniert einwandfrei

Vorne Hinten

Problematisch in WebKit, da die Sichtbarkeit der Rückseite nicht verborgen ist

Vorne Hinten

Dies ist in Firefox aus irgendeinem Grund nicht problematisch, obwohl die Eigenschaft auf die gleiche Weise funktioniert.

Präfixe

Firefox 10+ und IE 10+ unterstützen backface-visibilityohne Präfix. Opera (Post Blink, 15+), Chrome, Safari, iOS und Android benötigen alle -webkit-backface-visibility.

Werte

sichtbar (Standard) - Das Element ist immer sichtbar, auch wenn es nicht auf den Bildschirm zeigt.
versteckt - Das Element ist nicht sichtbar, wenn es nicht auf den Bildschirm zeigt.
erben - Die Eigenschaft erhält ihren Wert vom übergeordneten Element.
initial - Setzt die Eigenschaft auf den Standardwert visible.

Mehr Informationen

3D CSS Tester
Spec
Mozilla Docs

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.