kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

CSS Flip Animation – Objekte umdrehen

Zuletzt aktualisiert am 24 Kommentare , ,

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

Adobe XD, Performance, Responsive Design, Sketch, Visual Prototyping, Web Animationen, Corporate Design …

Jetzt Frühbucher-Rabatte sichern!

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;
}

Beispieldateien herunterladen

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!

Das könnte dich auch interessieren

24 Kommentare

  1. 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!

    Antworten
  2. 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?

    Antworten
  3. 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. :)

    Antworten
  4. 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?

    Antworten
  5. 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.

    Antworten
  6. 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.

    Antworten
  7. 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?

    Antworten
  8. 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!

    Antworten
  9. 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

    Antworten
  10. 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?

    Antworten
  11. 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

    Antworten
  12. 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.

    Antworten
  13. 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

    Antworten
  14. Thomas Graef

    Verfasst am 2. Februar 2019 um 10:55 Uhr.

    Hallo bei meiner Recherche bin ich nun über diese Site gestolpert. Vielleicht kann ich hier mal eine Frage anbringen…. Hab so etwas ähnliches mit einer Info (I) Grafik Datei gemacht ganz simpel. Also Autostart, endlos und ohne hover. Mein Problem ist das es bei der Drehung bei 90 und 270 Grad die Seitenansicht auf 0 Px geht. kann man da was mit css machen für 3d Ansicht ? also das ca. 5 px sichtbar werden. Hier der Aufbau….
    css:
    .spinner {
    animation: rotation 2s infinite linear;
    }

    @keyframes rotation {
    100%{ transform:rotatey(360deg) }
    }
    Auf der Site:

    Lg Thomas

    Antworten
  15. Silke

    Verfasst am 21. August 2019 um 13:48 Uhr.

    wow, danke – das ist genau das, wonach ich gesucht habe. Überhaupt habe ich schon einige deiner Tutorials gelesen und nachgebaut und bin jedesmal begeistert :-)
    Ich würde gerne das css insoweit modifizieren, dass sich das Bild beim Seitenaufruf (x-mal) dreht – sagen wir meinetwegen dreimal und dann als Frontansicht stehen bleibt. Wie wäre das zu bewerkstelligen?

    Antworten
    • Jonas Hellwig

      Verfasst am 21. August 2019 um 15:00 Uhr.

      Hallo Silke, du kannst anstelle eine Grad-Zahl bei transform: rotateY(180deg) auch das Schlüsselwort turn verwenden. Also mit rotateY(3turn) drehst du das Objekt 3x um die eigene Achse.

      Antworten
      • Silke

        Verfasst am 11. September 2019 um 17:55 Uhr.

        Hallo Jonas, erst einmal danke für die fixe Antwort. Ich konnte mich erst heute damit beschäftigen – leider klappt das nicht. Nach dem, was du schreibst, müsste sich das Objekt dann bei Hover dreimal drehen. Das klappt schon einmal nicht, was ich eigentlich erreichen wollte, ist aber, dass sich das Objekt von alleine (also nicht beim Hovern) xmal dreht, wenn die Seite aufgerufen wird. Gibt es da einen Weg? Einfach das Wort „hover“ zu entfernen ist wohl etwas zu einfach :D (aber ich habs probiert)

  16. Silke

    Verfasst am 20. September 2019 um 14:21 Uhr.

    Ich muss mich entschuldigen, „rotateY(3turn)“ klappt sehr wohl – ich habe mich in der Zeile vertan. Nur dass sich das Bild dreht, sobald man eine Seite aufruft, habe ich nicht hinbekommen. Ich habe es mit Befehlen aus anderen 3-D Animationen versucht, bin aber zu keinem Ergebnis bekommen. Also wenn jemand hier helfen könnte, wär das toll.

    Antworten
  17. bea

    Verfasst am 26. September 2019 um 2:04 Uhr.

    Danke für den super Input, sehr verständlich und gut gemacht.
    Das war mein erstes, aber sicher nicht das letzte Tutorial von dir das ich mir genauer anschaue ;))
    Ein kleinen Verbesserungsvorschlag hätte ich (wenngleich es für den Inhalt unwichtig ist).. wenn du eine der beiden Ansichten nochmal spiegelst wirkte es realistischer.. stell die Drehung mal auf 7sec, dann siehst du sicher was ich meine ;))
    thx & lg bea

    Antworten

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.