CSS Referenzhandbuch

CSS @Regel(RULES)

CSS Eigenschaftsliste

CSS background-Eigenschaft CSS3 animation-timing-function Eigenschaft

CSS3 backface-Verwendung und Beispiel der visibility-Eigenschaft

CSS3von backface-Die visibility-Eigenschaft bestimmt, ob die "Rückseite" des umgewandelten Elements sichtbar ist, wenn sie dem Benutzer gegenübersteht.

Nachstehende Tabelle zusammenfasst die Verwendungscontexte und Versionshistorie dieses Attributes.

Standardwert:	visible
Geeignet für:	Verformbare Elemente
Vererbung:	Keine
Animierbar:	Nein.Siehe auch Animationseigenschaften。
Version:	CSS3Neue Funktion
JavaScript-Syntax:	object.style.backfaceVisibility="verborgen"

backface-Die Verwendungssyntax von visibility

Die Syntax dieses Attributes ist wie folgt:

backface-visibility: sichtbar | verborgen | initial | vererbt

Das folgende Beispiel zeigt, wie man backface verwendet-visibility-Eigenschaft.

Beispiel

.flip-container　{
　　　　　　　　margin:　50px;
　　　　　　　　perspective:　1000px;
　　　　　　　　display:　inline-block;
　　　　}
　　　　.flip-container:hover　.card　{
　　　　　　　　transform:　rotateY(180deg);
　　　　}
　　　　.card,　.front,　.back　{
　　　　　　　　width:　130px;
　　　　　　　　height:　195px;
　　　　}
　　　　.card　{
　　　　　　　　position:　relative;
　　　　　　　　transition:　0.5s　all;
　　　　　　　　transform-style:　preserve-3d;
　　　　}
　　　　.front,　.back　{
　　　　　　　　position:　absolute;
　　　　　　　　backface-visibility:　hidden;
　　　　}
　　　　.front　{
　　　　　　　　z-index:　1;
　　　　　　　　transform:　rotateY(180deg);
　　　　}
　　　　.back　{
　　　　　　　　z-index:　2;
　　　　　　　　transform:　rotateY(0deg);
　　　　}

Testen Sie es heraus‹/›

Hinweis：backface-Die visibility-Eigenschaft ist sehr nützlich für die Erstellung von Animationen wie dem Drehen einer Münze oder dem Umblättern einer Karte, bei denen zwei verschiedene Bilder (d.h. Vorder- und Rückseite) kombiniert werden, um eine bessere3D-Drehungseffekt.

Eigenschaftswert

Die folgende Tabelle beschreibt die Werte dieser Eigenschaft.

Wert	Beschreibung
visible	Bezeichne die Rückseite als sichtbar, erlaube die Anzeige des Spiegels der Vorderseite. Dies ist der Standardwert.
hidden	Bezeichne die Rückseite als unsichtbar, verberge die Vorderseite.
initial	Setzen Sie diesen Wert auf seinen Standardwert.
inherit	Wenn angegeben, wird das zugehörige Element die backface des Elternelements verwenden-Berechnungswert der visibility-Eigenschaft.

Browserkompatibilität

backface-Kompatibilität der visibility-Eigenschaft des Browsers, alle gängigen Browser unterstützen diese Eigenschaft.

	Firefox 10+ ^-moz-，16 + Google Chrome 12+ ^-webkit-，36+ Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 15+ ^-o-，23+ ^-webkit-

Weiterlesen

Siehe folgende Tutorials：CSS3Übergang，CSS3 3D-Transformation，CSS3Animation。

zusammenhängende Eigenschaften：perspective，perspective-origin，transform，transform-origin，transform-style，transition。

CSS background-Eigenschaft CSS3 animation-timing-function Eigenschaft