Animierte 3d Objekte mit CSS3

Animierte 3d Objekte mit CSS3

Ein Artikel im „mobile Developer“ hat mich dazu animiert, mich etwas intensiver mit den 3D Möglichkeiten von CSS3 zu befassen.
Dieser Artikel setzt einen WebKit-Browser zum Testen der erstellten Objekte und Animationen voraus. Mit einem Mozilla-Browser wäre aber dasselbe möglich, man müsste nur die CSS Eigenschaften entsprechend ändern. Wie immer zieht der Internet Explorer noch nicht so richtig bei der Implementierung der CSS3 Standards mit.

Nach dem Erstellen eines dreidimensionalen Objekts durch translatierte und rotierte divs, habe ich noch eine Transformation bzw. Animation hinzugefügt.

 3d-Objekt erstellen

Diese Aufgabe gestaltet sich relativ simpel. Es ist nur etwas Arbeit alle divs an die korrekte Position zu setzen.

Zunächst erstellt man die divs für das Objekt:

. . .

its ist der Container, der das 3D-Objekt enthält. iX sind die Seitenflächen des Objekts. In diesem Fall wird ein dreidimensionales I erstellt.
Die Klasse runIT wird später benötigt, um die Animation zu starten.
Mit folgendem CSS Code wird zunächst der Container für das Objekt definiert:

		#its{
			top: 430px;
			left: 100px;
			position: absolute;
			-webkit-transform-style: preserve-3d;
		}

Das Interessante hierbei ist die Eigenschaft -webkit-transform-style: preserve-3d;. Sie definiert, dass die Kinderelemente des divs its zu einem 3D-Objekt gehören und später bei der Animation als Ganzes zusammengefasst werden.
Die Seiten des Objekts können nun nacheinander durch Translationen und Rotationen an die entsprechenden Stellen transformiert werden:

                      .
                      .
                      .
		#i4{
			width: 80px;
			height: 40px;
			-webkit-transform:
			translate(-20px, 100px)
			translateZ(-40px);
		}
                      .
                      .
                      .
		#i9{
			width: 40px;
			height: 40px;
			-webkit-transform-origin: 0% 0%;
			-webkit-transform:
			translate(60px, -40px)
			rotateY(90Deg);
		}
                      .
                      .
                      .

translate(X, Y) verschiebt das div um die angegebene Pixelzahl entlang der X und Y-Achse. translateZ erledigt dies analog entlang der Z-Achse, also in die Tiefe.
Mit rotateX bzw. rotateY wird das div um die X oder Y-Achse gedreht. Der Parameter gibt die Grade an, um die rotiert werden soll.
-webkit-transform-origin: 0% 0%; gibt an, wo sich der Ursprung für die Drehung befindet. 0% 0% ist dabei die linke obere Ecke des divs. 50% 50% ist die Mitte und 100% 100% die rechte unter Ecke.
Mit diesen Eigenschaften kann man sich nun das gewünschte Objekt zusammenbauen.

Die Animation

Neben einfachen Transformationen (siehe erstes Beispiel der Demo), können mit CSS3 auch etwas komplexere Animationen erstellt werden:

		@-webkit-keyframes itsanim{
			0%  {-webkit-transform: rotate3d(0,0,0,0Deg);}
			25% {-webkit-transform: rotate3d(-1,1,0,-45Deg);}
			50% {-webkit-transform: rotate3d(0,-1,1,90Deg) translate(50px, -250px);}
			75% {-webkit-transform: rotate3d(1,0,1,30Deg);}
		}

@-webkit-keyframes gibt die Keyframes für die Animation an. Die Prozentzahlen bestimmen die Zeitpunkte, an denen die angegebenen Transformationen beendet sein sollen.
itsanim ist der Name der Animation. Diesen benötigt man später, um die Animation zu starten.
Es sind dieselben Transformationen möglich, die wir schon beim Erstellen des 3D-Objekts eingesetzt haben. Die Eigenschaft rotate3d gibt eine Rotation um die Grade des letzten Parameters um eine Achse mit dem Vektor der ersten drei Parameter (X/Y/Z) an.

Gestartet wird die Animation durch folgenden Code:

		.runIT{
			-webkit-animation: itsanim 6s;
		}

Ich habe den Code für das Starten der Animation in eine Klasse integriert, die direkt dem Container-Element zugeordnet wird. Diese Klasse kann dem Container auch erst zu einem späteren Zeitpunkt per JavaScript zugewiesen werden, woraufhin die Animation startet.
Der erste Parameter der Eigenschaft gibt den vorher festgelegten Namen der Animation an. Der zweite Parameter definiert die Dauer der gesamten Animation.

Es ist auch möglich der Animation statt eines linearen zeitlichen Verlaufs, andere zeitliche Standard (zB. ease-in) oder selbstdefinierte Bézier Kurven zuzuweisen. Das war jedoch nicht Bestandteil meiner Spielereien, kann aber problemlos in den Weiten des Internets nachgeschlagen werden.

Hier nun zum Abschluß eine kleine Demo. Sie funktioniert allerdings ausschließlich in WebKit Browsern.

 

Diese Seite ist auch verfügbar in: Englisch

Kommentar absenden

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>