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.

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

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.