CSS wird heute für weit mehr verwendet als nur bloßes Styling. Und ich muss sagen, dass es eine wahre Freude ist, damit zu arbeiten. Animationen benötigen kein Codeschnipsel JavaScript mehr (fahrt mal mit der Maus über der Box!), und sind dazu noch performanter, weil diese meist automatisch Hardware beschleunigt sind. Heute möchte ich euch zeigen wie man mit CSS3 Flipping Animationen erstellt.
HTML Grundgerüsst
<div class="card"> <div class="front">front</div> <div class="back">back</div> </div>
CSS Basis
Hier erstmal das Styling um unseren Wrapper bzw. "card". Wir bauen uns eine Kasten mit einer Höhe und Breite von 250 Pixel. Die Vorderseite ist weiß und die Rückseite in einem Grau gehalten.
.card {
top: 30px;
position:relative;
width:250px;
height:250px;
margin:auto;
-webkit-perspective:1000;
}
.front, .back {
position:absolute;
border: 1px solid #bbb;
width:100%;
height:100%;
text-align: center;
}
.front { background-color:#fff; }
.back { background-color:#aaa; }CSS Animationen
Mit der Eigenschaft "backface-visibility: hidden" verstecken wir die Rückseiten der Boxen ".front" und ".back". An sonsten würde man die Rückseite von ".back" sehen, da ".back" im HTML Markup nach der Front kommt. Wir machen also damit den ".back"- Kasten unsichtbar, da dieser um die senkrechte Achse um 180° gedreht ist. Die "transition"- Eigenschaft macht, dass die Animationen genau 0,8 Sekunden dauert.
.front, .back {
backface-visibility: hidden;
transition:.8s;
}
.back { -webkit-transform:rotateY(180deg); }Und jetzt bringen wir Bewegung ins Spiel. Mit der einfachen pseudo Klasse ":hover", lassen wir mit der "transform"- Eigenschaft beide Elemente um 180° an der senkrechten Achse rotieren. So erhalten wir die Illusion einer umdrehenden Karte.
.card:hover .front {
-webkit-transform:rotateY(-180deg);
}
.card:hover .back {
-webkit-transform:rotateY(0deg);
}Und hier wie immer die Live Demo. Im nächsten Beitrag zeige ich euch wie man einen Kasten baut. Bis dahin, stay tuned und frohe Ostertage :)