Nachdem ich letztes mal eine simple Flip-Animation gezeigt habe, bauen wir heute einen virtuellen 3D Würfel der sich horizontal rotieren lässt. Und das alles mit der Macht von CSS. Also mein junger Padavan loslegen wir müssen.
Das HTML Gerüst.
Hier das HTML-Markup. Es gibt ein Wrapper der den eigentlichen Würfel "cube" beinhaltet. Der wiederum hat sechs weitere Divs, welche die sechs Seiten eines Würfels entsprechen.
<div class="wrap"> <div class="cube"> <div class="front">vorne</div> <div class="back">hinten</div> <div class="top">oben</div> <div class="bottom">unten</div> <div class="left">links</div> <div class="right">rechts</div> </div> </div>
Das knifflige ist, dass wir nun alle Sechs Seiten als Würfel zusammen bauen müssen. Wie das geht, zeige ich im Nächsten Abschnitt.
Die Magie des CSS
Als erstes definieren wir den Animations-Container "wrap", dass er sich einer 3D Perspektive verhalten soll.
.wrap {
perspective: 800px;
perspective-origin: 10% 100px;
width: 1200px;
position: absolute;
top: 50px;
left: 100px;
}Mit dem Trick, dass wir dem eigentlichen Würfel "position:relative" deklarieren, verhalten sich alle Seiten des Würfels mit der "position: absolute" relativ zum Würfel und nicht Body Element. Damit der Würfel nicht flach ist, definieren wir mit der Eigenschaft "transform-sytle: preserve-3D", dass es sich um ein 3D-Element handelt.
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
}Bevor wir hier jede einzelne Seite des Würfels definieren, bekommt jede Seite einen einheitlichen Style:
.cube div {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid #000;
}Die Werte "rotateX", "rotateY" und "rotateZ" der "transform"-Eigenschaft sorgen dafür, dass die Seiten perspektivisch korrekt zu einander stehen. Mit Hilfe von "translateX", "translateY" und "translateZ" werden die einzelne Seiten im Raum korrekt positioniert. Am besten schaut ihr euch die Demo genauer an, und ändert einfach mal die Werte. So versteht man das besser. Der Drehpunkt wird mit der Eigenschaft "transform-origin" definiert.
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.top {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
}
.bottom {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.front {
transform: translateZ(100px);
}Den Würfel animieren
Die Animation wird diesmal mit hilfe der "@keyframes" mit dem Name spin definiert. Wir lassen den Würfel an der Senkrechten Achse (rotateY) horizontal drehen. Eine komplette Drehung lassen wir 5 Sekunden lang animieren und definieren, dass diese Animation unendlich oft wiederholt wird.
@keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
.cube {
animation: spin 5s infinite linear;
}Und hier noch einmal eines der beidrückende Beispiele was so alles mit reinen CSS möglich ist. Viel Spaß damit.