CSS Flip Animation – Objekte umdrehen
Bei sog. CSS-Flips (CSS3-3D-Animationen) wird ein Objekt umgedreht, so dass die Rückseite sichtbar ist. Um den Effekt zu erreichen, setzen wir CSS3-3D-Transformationen und CSS3-Transitions ein. Spannend an diesem Beispiel sind auch die perspektivischen Möglichkeiten von CSS.
Workshops und Seminare von kulturbanause
Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …
Basis-Aufbau und Funktionsweise
Damit in CSS3 perspektivische 3D-Effekte möglich sind, müssen wir zunächst die globale Perspektive der Szene in einem Container-Element festlegen. In diesem Beispiel verwenden wir dazu den div mit der Klasse .kulturbanause-logo.
Innerhalb des »Perspektiven-Containers« verwenden wir noch einen Container für die Animation. Dieser trägt die Klasse .turnaround und steuert u.a. die Dauer der Animation.
Zuletzt fügen wir noch zwei Elemente für die Vorderseite (.front) und die Rückseite (.back) des Logos ein. Der HTML-Code sieht also wie folgt aus:
<div class="kulturbanause-logo">
<div class="turnaround">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
Der Trick ist nun folgender: Mit Hilfe von transform: rotateY(180deg); drehen wir die Rückseite (.back) des Logos um. Normalerweise handelt es sich bei der Rückseite eines Elements um die gespiegelte Vorderseite. Mit backface-visibility: hidden; ändern wir diese Darstellung und sorgen dafür, dass Elemente unsichtbar werden, sobald man ihre Rückseite sehen würde. Wir haben nun also eine ganz normale Vorderseite des Logos (.front) und eine Rückseite (.back) die allerdings umgedreht wurde und daher unsichtbar ist.
Der Rest ist denkbar einfach. Wir drehen per Mouse-Over nun gemeinsam Vorder- und Rückseite um 180°. Dazu brauchen wir den Container .turnaround. Nun passiert folgendes: Die Vorderseite (.front) wird nach hinten gedreht und dadurch unsichtbar. Gleichzeitig passiert genau das Gegenteil mit der Rückseite (.back), denn die hatten wir genau aus diesem Grund bereits vorher umgedreht. Durch die Rotation der gesamten Szene befindet sich beim Mouse-Over die Vorderseite von .back vorne und ist daher sichtbar.
CSS-Code
Schaut euch am besten den Code an, ich habe die schwierigen Passagen kommentiert. Da CSS3-3D-Transformationen Vendor-Präfixe benötigen, habe ich das Plugin Prefix-Free verwendet um das Beispiel einigermaßen übersichtlich zu halten. Den Browser-Support für CSS-Animationen entnehmt ihr bitte dieser Website.
.kulturbanause-logo {
height: 500px;
width: 500px;
perspective: 1500; /* Hier wird die Perspektive der gesamten Szene festgelegt. Der Wert hat Auswirkung auf die Verzerrung */
float: left;
margin: 0 1em;
}
.kulturbanause-logo:hover .turnaround {
transform: rotateY(180deg); /* Beim Mouse-Over wird die Szene umgedreht */
}
.kulturbanause-logo .front {
background: url(flip-front.jpg) 0 0 no-repeat;
}
.kulturbanause-logo .back {
background: url(flip-back.jpg) 0 0 no-repeat;
}
.turnaround {
transition: .5s /* Die Drehung soll 0,5 Sekunden dauern */;
transform-style: preserve-3d; /* Kind-Elemente (.front + .back) sollen ihre 3D-Eigenschaften behalten*/
position: relative;
height: 100%;
}
.front,
.back {
backface-visibility: hidden /* Die Rückseite von Elementen soll unsichtbar sein */;
position: absolute;
width: 100%;
height: 100%;
}
.front { z-index: 2; }
.back {
transform: rotateY(180deg) /* Die Rückseite des Logos wird umgedreht, um dann bei der Drehung der gesamten Szene vorne zu sein :) */;
z-index: 1;
}
Jetzt bist du gefragt!
Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.
Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!
Uta
Verfasst am 16. Oktober 2013 um 12:29 Uhr.
Cool! Danke für die Erklärung! Bin gerade erst am Lernen von CSS, und freue mich einfach, dass ich verstanden hab, wie’s geht! Schön, und klingt gar nicht kompliziert!
Sebastian
Verfasst am 17. Oktober 2013 um 12:26 Uhr.
Das ist wirklich super interessant. Und in welchen Browsern funktioniert das Ganze? Gibt es eine Möglichkeit, dass das ganze auch in den alten Internet Explorer funktioniert?
Jonas Hellwig
Verfasst am 17. Oktober 2013 um 13:49 Uhr.
Hallo Sebastian, den Browser-Support kannst du hier nachschauen. In alten IEs wird es nicht funktionieren, dafür ist es zu Fancy :) aber du kannst mit Progressive Enhancement bzw. Graceful Degradation eine saubere Fallback-Lösung anbieten. Vom Flip-Effekt sollte natürlich keine Funktion oder Information abhängig sein.
Sebastian
Verfasst am 17. Oktober 2013 um 16:13 Uhr.
Danke für die Infos!
Sebastian
Verfasst am 17. Oktober 2013 um 19:36 Uhr.
Hi Jonas! Wieder ein sehr gelungener Beitrag. Vielen Dank für diese ausführliche und echt leicht zu verstehende Zusammenfassung. :)
Andreas
Verfasst am 6. November 2013 um 10:41 Uhr.
Cool, toller Effekt und super Erklärung :-) Vielen Dank erstmal dafür. Bin relativ neu in HTML/CSS unterwegs und arbeite mich gerade ein. Lässt sich der Effekt auch mit einem Maus-Klick anstatt dem Mouse-Over realisieren?
Ralph Segert
Verfasst am 8. Dezember 2013 um 20:48 Uhr.
Zuerst einmal Danke für diese elegante Lösung, ich habe Sie erfolgreich für ein großzügiges Menü transformiert und Chrome, Opera, Firefox und die mobilen Browser spielen wohlwollend mit. ;) Seltsamerweise aber nicht der IE 10, obwohl er das können sollte, wenn ich folgende Seite richtig verstehe:
http://msdn.microsoft.com/de-de/library/ie/hh673529(v=vs.85).aspx
Bei der Animation im IE10 wird die „Front“-Seite im wahrsten Sinne des Wortes gespiegelt und die „Back“-Seite nicht angezeigt. Naja, ich probiere es einmal mit Alternativen in Conditional Comments aus.
Ralph Segert
Verfasst am 9. Dezember 2013 um 9:14 Uhr.
Nachtrag: Conditional Comments im IE 10, da war doch was ;-) Alternativ konnte ich das Problem mit dem „@media -ms-high-contrast-Hack“ entschärfen, sieht auch noch gut aus:
hover und „front“ statt transform im transition-Modus und:
back {backface-visibility: visible;}
Wenn ich richtig verstanden habe, greift im IE 10 „transform-style: preserve-3d“ nur dann, wenn es sich um echte 3D-Objekte handelt.
Birgit
Verfasst am 10. April 2014 um 11:01 Uhr.
Vielen Dank, sehr gut erklärt und nützlich! Aber kann es sein, daß du das Bild für die Rückseite spiegelverkehrt abspeichern müßtest?
Jonas Hellwig
Verfasst am 11. April 2014 um 20:26 Uhr.
Eigentlich nicht.
Voxs
Verfasst am 10. Juli 2014 um 1:31 Uhr.
ist ’ne nette Sache das – hab mir ne beispielseite gebaut und dann auch unter Android 2.3 angeschaut – da dreht sich die Ani auch, aber wie ein Windmühlrad im Kreis, auch lustig! :-) Gibts da ’ne Lösung? Cheers!
Voxs
Verfasst am 10. Juli 2014 um 10:53 Uhr.
noch eine Frage, weiß jmd. eine einfache Möglichkeit die „Rückseite“ mit einem Link zu versehen? Danke
Jonas Hellwig
Verfasst am 10. Juli 2014 um 12:05 Uhr.
Vielleicht hilft dir dieses Tool weiter.
Voxs
Verfasst am 10. Juli 2014 um 12:30 Uhr.
danke, eine interessante kleine Lösung! Probiere ich mal aus.
noch ein
ps
zum obigen CSS:
da ich mit dem Wert und Kommentar zu „perspective: 1500;“ („/* Hier wird die Perspektive der gesamten Szene festgelegt. Der Wert hat Auswirkung auf die Verzerrung */“) nicht so recht was anzufangen wusste, änderte ich den zum Test mal auf 1000 – nachträglich las ich bei David Walsh (http://davidwalsh.name/css-flip) – das: „keeps perspective … perspective: 1000; …“ – Aha, ist also der neutrale Wert?
Susanne
Verfasst am 7. Februar 2015 um 12:54 Uhr.
Hallo :), ich hab ein Logo mit Vorder- und Rückseite. Es soll sich bei Mouseover drehen. Macht es auch … aber nur im Google Chrome. Im Explorer und Firefox dreht es sich und man sieht das Front gespiegelt… also das Back wird nicht eingeblendet. :( … hat einer eine Idee warum das so ist??
Gruss Susanne
Klaus Schleusener
Verfasst am 21. Juli 2015 um 10:20 Uhr.
Ich habe auch erst die Seite von David Walsh gelesen. Dein Code scheint mir erstmal verständlicher zu sein. Mal schaun wie ich den Effekt einbaue.
Jörg Marzinzick
Verfasst am 29. Januar 2016 um 20:30 Uhr.
Sehr gelungener Beitrag! Leider muss ich immer wieder feststellen, dass viele der 3d – im IE nicht funktionieren. Ich habe versucht Lösungen zu finden und präsentiere sie unter http://www.joerg-marzinzick.de