DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die backface-visibility Eigenschaft 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 dem Bildschirm zugewandt ist. Dies würde beispielsweise ein Element vom Bildschirm wegdrehen.
.flip {
transform: rotateY(180deg);
}Es wird so aussehen, als hätten Sie es mit einem Pfannenwender aufgehoben und wie einen Pfannkuchen umgedreht. Das liegt daran, dass der Standardwert für backface-visibility visible ist. Anstatt sichtbar zu sein, könnten Sie es auch verstecken.
.flip {
transform: rotateY(180deg);
backface-visibility: hidden;
}Syntax
backface-visibility: visible | hidden;- Anfangswert:
visible - Gilt für: transformierbare Elemente
- Vererbt: nein
- Prozentwerte: n/v
- Berechneter Wert: spezifisches Schlüsselwort
- Animationstyp: diskret
Werte
visible(Standard) – Das Element ist immer sichtbar, auch wenn es nicht dem Bildschirm zugewandt ist.hidden– Das Element ist *nicht* sichtbar, wenn es nicht dem Bildschirm zugewandt ist.inherit– Die Eigenschaft übernimmt ihren Wert vom Elternelement.initial– Setzt die Eigenschaft auf ihren Standardwert, dervisibleist.
Demo
Dies ist nützlich bei 3D-Effekten. Zum Beispiel...
Funktioniert richtig
<div class="container">
<div class="card">
<div class="face front">Front</div>
<div class="face back">Back</div>
<p> </p>
</div>
</div>Problematisch in WebKit, da backface-visibility nicht versteckt ist
<div class="container no-hide">
<div class="card">
<div class="face front">Front</div>
<div class="face back">Back</div>
<p> </p>
</div>
</div>Das ist aus irgendeinem Grund in Firefox nicht problematisch, obwohl die Eigenschaft auf die gleiche Weise funktioniert.
Browser-Unterstützung
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 10 | Alle | 10 1 | 12 2 | 5.1 2 | 15 2 |
| Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Alle | Alle | 3 2 | 5 2 | 62 |
1 Unterstützt in Firefox 10-15 mit Präfix
-moz-2 Unterstützt in Chrome 12-35, Safari, Safari iOS und Opera 15-22 mit Präfix
-webkit-
Cool
Das ist sehr cool für Menüdesigns.
Endlich haben einige andere Browser diese coole Funktion implementiert, die es schon seit einiger Zeit in Safari gibt.
Mir ist aufgefallen, dass diese Eigenschaft nicht auf Elemente angewendet wird, die absolut positioniert sind (zumindest in Chrome).
Gibt es eine Möglichkeit, die DICKE des tatsächlichen Divs zu ändern? Um zu zeigen, dass das Div nicht flach ist? Wie eine Tiefe? Ich denke, das wäre wirklich cool!
Aber es ist trotzdem cool.
Schau dir das an
Irgendwie. Sie müssten zusätzliche Elemente als Seiten verwenden (Vorderseite + 4 Seitenelemente + Rückseite)
Hey, sehr schöner Artikel. Hat mir in einigen Fällen geholfen, als ich diese CSS-Regel verwendet habe.
Aber ich bin in einem großen Dilemma deswegen.
Seit vielen Tagen kämpfe ich mit Canvas-Zeichenoperationen (verschiedene Formen) in Sencha Touch (JavaScript)-Anwendungen.
Das Zeichnen von Linien war etwas langsam, während sich der Finger beim Zeichnen auf dem iPad im Canvas vor der Linie bewegte.
Ich konnte nicht herausfinden, was diese Anwendung so langsam machte. Dann, als ich plötzlich backface-visiblity: visible, property in css des Körpers hinzufügte, wurde das Zeichnen schneller, wie es sein sollte.
Aber welche Bedeutung hat diese CSS in Bezug auf das Canvas-Zeichnen, da beim Zeichnen auf Canvas keine Animation stattfindet?
Danke.
Wissen Sie, warum das meine :active Zustände kaputt macht?
Wenn ich die backface-visibility Eigenschaft entferne, funktioniert alles bestens. Aber sobald sie enthalten ist, kann ich keine :active Pseudo-Zustand mehr zum Laufen bringen.
Gedanken?
Ich glaube nicht, dass backface-visiblity-hidden unter Android 3.0 funktioniert. Ich schaue es mir auf einem Xyboard-Tablet (mit 3.2.2) an und es scheint nichts zu verstecken. Totale Enttäuschung. Ich wünschte, Google würde seine Version von Webkit auf Vordermann bringen.
Ich stimme zu – ich glaube nicht, dass dies aus irgendeinem Grund im Android-Browser unterstützt wird.
Probieren Sie dieses Beispiel: http://desandro.github.com/3dtransforms/examples/card-01.html
Es funktioniert unter Chrome/Safari auf dem Desktop, funktioniert sogar in der Chrome-Browser-App unter iOS, aber nicht im Android-Browser (Jelly Bean).
Wirklich nützlicher Anwendungsfall für eine weniger bekannte Eigenschaft!
Ich habe gerade
-webkit-backface-visibility: hiddenverwendet, um Text-Rendering-Inkonsistenzen in Webkit zu lösen, wo es viele Animationen auf einer Seite gab und Text dünner (und gelegentlich flackernd) als auf anderen Seiten gerendert wurde. Das machte den gesamten Text dünn, aber wenigstens war er konsistent.es kann in IE10 nicht korrekt funktionieren. Können Sie mir einen Hinweis geben, wie ich das beheben kann?
Siehe meinen Kommentar hier http://davidwalsh.name/css-flip
Vielen Dank. Ich habe wahrscheinlich zum 5. Mal etwas auf meiner Website repariert, indem ich Ratschläge von dieser Website erhalten habe. Sie sind ein Retter für Websites, Mann.
Sie haben mir den Tag gerettet! Vielen Dank :D
Verwenden Sie nicht -webkit-backface-visibility, es ist extrem fehlerhaft und führt in vielen Fällen dazu, dass der Griff der vertikalen Bildlaufleiste verschwindet. Immer noch fehlerhaft mit Chrome 23.
Sie haben Recht. …und es ist immer noch nicht in Chrome 30 behoben. Gibt es trotzdem einen besseren Weg, das von Guy erwähnte Flackern zu verhindern? Ich habe dieses Problem ziemlich oft, wenn ich mit Übergängen in Chrome arbeite, und ich sehe kein wirkliches Muster dahinter…
Funktioniert nicht mit Internet Explorer
Zur Information: Mit FF 16 (OSX 10.5.8) sehe ich den Text "front" im problematischen Beispiel. Könnte diese Eigenschaft ein Problem im Android-Stock-Browser beheben? Mein Kunde führt keine 3D-Rotationen durch, hat aber ein Problem, bei dem ein verstecktes Bild, das nur bei :hover sichtbar sein sollte, das Idle-Bild ersetzt.
Opera 15, die erste Blink-Version, unterstützt 3D-Transformationen, daher möchten Sie vielleicht die Tabelle "Browserunterstützung" aktualisieren.
Außerdem gilt "Problematisch in WebKit, da backface-visibility nicht versteckt ist" auch für Blink (Chrome und das neue Opera).
Hallo Leute! Gibt es eine Lösung für Opera? Vielleicht ein JS, das diesen Effekt nur in Opera ausführt? ...
Diese Eigenschaft funktioniert unter iOS 7 nicht richtig und führt dazu, dass der Inhalt beim Scrollen verschwindet.
Dieses kleine CSS-Stück hat meine Überschriften unter iOS 7 gestreckt. iOS 7 ist in den letzten Wochen meine Hölle gewesen. Was in Version 6 gut funktionierte, funktioniert in Version 7 nicht mehr richtig. Danke, Apple.
Selbst Ihre Seiten-Demo funktioniert in IE-10 nicht.
Zu Ihrer Information: Dies hat auch dazu geführt, dass iOS 7.0.2 Chrome und Safari bei mir abgestürzt sind, und es hat drei Stunden gedauert, bis ich es endlich debuggt hatte. Wenn Ihr mobiler Browser abstürzt, könnte dies die Ursache sein, wenn Sie ihn verwenden.
Hallo Scott! Möchten Sie sagen, wie Sie es schließlich gelöst haben? Ich glaube, ich erlebe Abstürze deswegen.
Ich kann die gleiche Erfahrung wie Scott bestätigen… NIEMALS *{ backface-visibility:hidden; } NIEMALS alle Elemente ansprechen, nur die, die Sie benötigen. Dies war auch die Ursache dafür, dass meine Website auf Geräten abgestürzt ist.
hey..
diese Eigenschaft funktioniert nicht in IE.
:(
Gibt es eine Lösung, um sie in IE zu unterstützen?
Ich habe viel versucht. Indem ich -ms-Präfixe und andere Dinge hinzugefügt habe. Aber backface-visibility wird nicht unterstützt..
Problem mit dem Umdrehen unter Windows XP, siehe die Rückseite über der Vorderseite
Hallo, das Kopieren Ihres Tutorials reproduziert den Effekt für mich nicht.
Wie deklariere ich eine Vorderseite und Rückseite in HTML?
Funktioniert nicht in Safari
Danke für den tollen Artikel. Vor einiger Zeit habe ich diesem Leitfaden gefolgt, um ein HTML5 Solitaire-Spiel mit 3D-Animationen zu erstellen. Ich glaube, es ist ziemlich gut geworden. Ich liebe es, dass wir endlich diese Art von Dingen tun können.
Ich habe Probleme in Chrome, bei denen backface-visibility nur funktioniert, wenn die Entwicklertools geöffnet sind. Ich entwickle normalerweise mit ihnen geöffnet, daher war es eine Enttäuschung zu glauben, ich sei mit dieser Funktion fertig, nur um festzustellen, dass sie überhaupt nicht funktioniert. Hat jemand solide Ratschläge, wie ich das in Chrome zum Laufen bringe? Ich meine, offensichtlich hat es die Fähigkeit, wenn es mit geöffneten Devtools korrekt angezeigt wird.
Hat jemand schon einmal eine "totpixelige" Linie gesehen, wenn backface-visibility verwendet wird, aber nur auf Retina-Bildschirmen?
https://www.dropbox.com/s/eypem6jqhyok2w1/Screenshot%202015-03-11%2011.24.25.png?dl=0
Ich habe dieses Problem auch! Es ruiniert eine Website auf Retina, aber wenn die Regel entfernt wird, wird sie auf Nicht-Retina-Geräten etwas ruckelig. Wenn jemand geniale Lösungen hat, würde ich mich freuen, davon zu hören!
schöner Artikel
Ich versuche, dieses Beispiel zu bekommen, weil es jedes Mal, wenn Sie mit der Maus über das Element fahren, den Effekt erzielt, da ich andere gefunden habe, die manchmal den Effekt ohne Übergang nicht erzielen, aber dieses Beispiel funktioniert in IE 10+ nicht, und auch nicht das Seitenbeispiel... Konnte es jemand reparieren? Danke!
Sie haben mir den Tag gerettet! Vielen Dank.
Tolle Erklärung. Ich habe gerade eine andere Erklärung von einer anderen Ressource gelesen und sie ergab einfach keinen Sinn. Ich denke, Sie haben die Dinge für mich richtig geklärt. Danke!