Auf meiner Suche nach den neuen Möglichkeiten, die CSS 3 so bietet, bin ich auf die 3D-Animation gestoßen, die sich mit den neuen Befehlen realisieren lässt. Hierbei kommen die Deklarationen @keyframes, transform und animation hauptsächlich zum Einsatz.

Bei meinen Recherchen bin ich auf die Seite von Paul Hayes gestoßen, der sich schon mal intensiv mit diesen neuen Techniken auseinander gesetzt hat und ein paar Experimente in Richtung 3D-Animation mit CSS 3 gemacht hat. Inspiriert hat mit dabei sein 3D-Cube, der sich mittels JavaScript und den Pfeiltasten auf der Tastatur räumlich drehen lässt. Hier könnt ihr euch sein Ergebnis ansehen:

3D animated Cube by Paul Hayes

Nun wollte ich keinen Würfel, der sich auf der Stelle dreht, sondern einen, der über ein Brett rollt, als wenn er gewürfelt wird. Nun, man mag mir die mangelnden physikalischen korrekten Drehungen und Kollisionen verzeihen, aber mein Ergebnis sieht wie folgt aus:

Rolling Dice by eMeLPe WebDes!gn

Randbemerkung:
Wie leider so oft der Fall bei neuen Techniken im Bereich von CSS 3, kommt auch hier die Browser-Bremse mal wieder schwerlich zum tragen. Mal davon abgesehen, dass an solche Spielchen mit dem IE nicht einmal im Traum zu denken ist, funktionieren die folgenden Code-Schnipsel auch nicht im Opera. Der Firefox zeigt zwar etwas an, jedoch mangelt es ihm an der räumlich Darstellung des Befehls transform-style: preserve-3d.

Also ist diese schöne Sache momentan nur wirklich schön in Webkit basierten Browsern, wie Chrome oder Safari, anzusehen.

Kommen wir aber nun zu den einzelnen Code-Abschnitten.

Ich habe mir im Photoshop sechs gleichgroße Würfelseiten mit entsprechender Nummerierung gebastelt und einzeln abgespeichert. Hier lasse ich eurer Kreativität freien Lauf, wie ihr diese Seiten aussehen lasst und gehe darauf nicht näher ein.

Als ersten Schritt erstellen wir eine Fläche auf der der Würfel rollen soll und sechs DIVs, die die Seiten des Würfels darstellen sollen. so könnte das aussehen:

<div id="cubebox">
    <div id="cube">
        <div class="face one">
            <img src="eins.jpg" alt="Würfelseite 1" />
        </div>
        <div class="face two">
            <img src="drei.jpg" alt="Würfelseite 3" />
        </div>
        <div class="face three">
            <img src="zwei.jpg" alt="Würfelseite 2" />
        </div>
        <div class="face four">
            <img src="vier.jpg" alt="Würfelseite 4" />
        </div>
        <div class="face five">
            <img src="fuenf.jpg" alt="Würfelseite 5" />
        </div>
        <div class="face six">
            <img src="sechs.jpg" alt="Würfelseite 6" />
        </div>
    </div><!-- #cube -->
</div><!-- #cubebox -->

Jetzt brauchen wir noch einen Button, der die Animation startet. Eine @keyframes-Animation in CSS 3 ist grundsätzlich so ausgelegt, dass sie nur einmal oder eine bestimmte Anzahl von Zyklen durchläuft. Da ich die Animation aber nicht in einem Loop oder nur einmal ablaufen lassen möchte, bauen wir ein interaktives Element, den Button, ein.

<button id="rollit" onclick="rollIt();">Roll the Dice</button>
<button id="reload" onclick="reload();">Reload Animation</button>

Nun fragt man sich, „Warum zwei Buttons?“. Nun, die Animation ist auf einen Durchlauf ausgelegt. Dieser wird mit dem ersten Button über die Funktion „rollIt()“ gestartet. Anschließend wird der erste Button durch den zweiten Button ausgetauscht, damit die Animation neu geladen werden und von vorne gestartet werden kann.

Die Formatierung der Buttons habe ich wie folgt gewählt.

button#rollit, 
button#reload {
    display: block;
    width: 300px; 
    height: 35px;
    margin: 50px auto;
    border: 1px solid #83d0f5;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(#ffffff,#83d0f5);
    box-shadow: 0px 0px 10px #ffffff inset, 0px 0px 10px #959595;
    font-weight: bold;
    font-size: 12pt;
    text-shadow: 0px 0px 1px #ffffff;
    color: #009fe3;
    cursor: pointer;
}

button#reload {
    display: none;
}

Kommen wir nun zum CSS des Würfels, damit dieser auch wie ein Würfel aussieht.

Zuerst wird die cubebox, bzw. die Fläche formatiert, auf der der Würfel rollen soll. durch den Befehl „perspective“ wird die Position des Betrachters festgelegt.

div#cubebox {
    width: 960px; 
    height: 480px;
    margin: 50px auto; 
    padding: 0;
    box-shadow: 0px 0px 20px #959595;
    border: 3px solid #000000;
    border-radius: 10px;
    -webkit-perspective: 800px;
            perspective: 800px;
    -webkit-perspective-origin: 50% 200px;
            perspective-origin: 50% 200px;
}

Jetzt folgt die Formatierung für den Würfel.

#cube {
    position: relative;
    margin: 0;
    width: 100px; 
    height: 100px;
    box-shadow: 40px 40px 40px #ccc;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 2s linear;
            transition: transform 2s linear;
}

#cube .one {
    -webkit-transform: rotateX(90deg) translateZ(50px);
            transform: rotateX(90deg) translateZ(50px);
}

#cube .two {
    -webkit-transform: translateZ(50px);
            transform: translateZ(50px);
}

#cube .three {
    -webkit-transform: rotateY(90deg) translateZ(50px);
            transform: rotateY(90deg) translateZ(50px);
}

#cube .four {
    -webkit-transform: rotateY(180deg) translateZ(50px);
            transform: rotateY(180deg) translateZ(50px);
}

#cube .five {
    -webkit-transform: rotateY(-90deg) translateZ(50px);
            transform: rotateY(-90deg) translateZ(50px);
}

#cube .six {
    -webkit-transform: rotateX(-90deg) translateZ(50px) rotate(180deg);
            transform: rotateX(-90deg) translateZ(50px) rotate(180deg);
}

.face {
    position: absolute;
    width: 100px; 
    height: 100px;
    border: 1px solid #000;
}

Zu guter letzt müssen wir noch die Animation deklarieren, damit der Würfel auch weiß, wie er zu rollen hat.

@-webkit-keyframes rolling {
    0% { -webkit-transform: rotateX( 15deg); margin: 20px; }
    10% { -webkit-transform: rotateX( 30deg); margin: 60px 25px; }
    20% { -webkit-transform: rotateY( 15deg); margin: 100px 50px; }
    30% { -webkit-transform: rotateY( 30deg); margin: 140px 100px; }
    40% { -webkit-transform: rotateZ( 15deg); margin: 180px 200px; }
    50% { -webkit-transform: rotateZ( 30deg); margin: 220px 300px; }
    60% { -webkit-transform: rotateZ( 60deg); margin: 260px 400px; }
    70% { -webkit-transform: rotateZ(120deg); margin: 300px 500px; }
    80% { -webkit-transform: rotateZ(180deg); margin: 340px 600px; }
    90% { -webkit-transform: rotateZ(240deg); margin: 360px 700px; }
    100% { -webkit-transform: rotateZ(300deg);
    -webkit-transform: rotateY( 90deg); margin: 300px 800px; }
}

Damit steht die Formatierung. Jetzt soll das Ganze natürlich noch in Bewegung kommen. Dazu basteln wir uns zwei kleine JavaScript Funktionen, die das alles regeln. Als erstes die Funktion rollIt(), die alles startet und den Button austauscht.

function rollIt() {
    var cube = document.getElementById('cube');
    var btn1 = document.getElementById('rollit');
    var btn2 = document.getElementById('reload');

    // animation starten
    cube.style.webkitAnimationName = "rolling";
    cube.style.webkitAnimationDuration = "5s";
    cube.style.webkitAnimationIterationCount = "1";
    cube.style.webkitAnimationTimingFunction = "linear";

    // startbutton verschwinden lassen
    btn1.style.display = "none";

    // resetbutton anzeigen
    btn2.style.display = "block";
}

Und als zweites die Funktion reload(), die die Seite neu lädt.

function reload() {
    // seite neu laden
    window.location.reload();
}

Damit ist unser kleines 3D-Animations-Experiment abgeschlossen und wir können es halten wie die alten Römer:

 

alea iacta est
lateinisch: Der Würfel ist gefallen.