eleqtriq

CSS 3D Gallery

Dies ist der zweite Teil meiner Serie über 3D-Transformationen mit CSS. Den ersten Teil findet Ihr hier.

Auf einmal waren sie da: mit der Einführung von CSS3 befand sich plötzlich ein obskures Werkzeug in unserem Werkzeugkoffer aber keiner wusste so recht, was er damit anfangen sollte: die Transformationsmatrix. Wie konnte sich dieses mathematische Gebilde, das offensichtlich ein verrückter Nerd mit einer Vorliebe für 90ies Science-Fiction erfunden hatte auf einmal in einen CSS-Standard verirren?

Open Example

Die gute Nachricht zuerst: „Transformationsmatrix” mag ein kompliziertes Wort sein, schwer zu verstehen ist das Prinzip aber nicht. Besser noch: wenn man nicht will, muss man sie nicht einmal verstehen, kann sie aber trotzdem einsetzen! Wenn man sich aber die Mühe macht, sie zu begreifen, hat man ein wirklich machtvolles Werkzeug zur Hand um DOM-Elemente zu verändern. Flash-Entwickler haben hier (mal wieder) einen Vorteil: Transformationsmatrizen wurden schon vor Jahren mit Flash 8 eingeführt.

Leider ist die Dokumentation dieser Gebilde nur dünn, im Falle der 3 dimensionalen Transformationsmatrizen ist fast keine Information bei den üblichen Quellen zu finden. Aus diesem Grunde dieses kleine Tutorial. Ich hoffe, es bringt dem einen oder anderen etwas Klarheit.

Was sind Matrizen?

Matrizen sind wie der Warp-Antrieb in Star-Trek: von außen wird die Raumzeit verändert, aber die Leute im Raumschiff merken nichts davon.

Matrizen stammen aus der Vektorrechnung (wer sich darunter jetzt nichts vorstellen kann: sucht den Mathelehrgang Eurer Wahl auf. Ihr solltet auf jeden Fall wissen, dass die grünen Pfeile in den Diagrammen auf dieser Seite die Vektoren darstellen). Wer sich schon einmal mit Spieleprogrammierung beschäftigt hat weiss, dass Vektoren und Matrizen hier ein sehr wichtiges Werkzeug sind. Warum? Nun, man kann mit einer Matrize ein 2- oder 3-dimensionales Objekt verändern und trotzdem bleiben seine „inneren” Eigenschaften erhalten. Stellen wir uns ein Flugzeug vor: wir drehen es mit der Spitze nach links. Es soll in die Richtung fliegen, in die seine Spitze zeigt, darum befehlen wir ihm anschließend „fliege nach links”. Ändert sich die Flugrichtung, wiederholen wir das ganze: erst drehen wir das Flugzeug, merken uns die Richtung, in die die Nase zeigt und passen die Bewegung an. Diese Art der Steuerung kann im 3-dimensionalen Raum schnell sehr kompliziert werden. Nehmen wir mal an, wir wollten das Flugzeug zick-zack fliegen lassen. Dann müsste das Programm unentwegt verfolgen, in welche Richtung die Nase des Flugzeugs denn jetzt schon wieder zeigt, um die Steuerung anzupassen. Mit Matrizen können wir dieses Problem vermeiden: ich wende eine Matrixtransformation auf das Flugzeug an und mein Programm muss dem Flugzeug nur befehlen geradeauszufliegen. Es wird immer seiner Nase nach fliegen und die Matrix sorgt dafür, dass die Nase in die richtige Richtung zeigt.

Weitere Vorteile von Matrizen:

Wie sieht eine Matrix aus?

Eine Matrix ist eigentlich einfach nur eine Zahlenfolge und wird normalerweise in einem Array gespeichert: [0.5, 4, 2.3, 1.5] wäre zum Beispiel eine einfach kubische 2-dimensionale Matrix. Da diese Schreibweise aber schwer zu lesen ist, gilt die Konvention, sie zeilenweise zu notieren:.

0.54
2.31.5

Was bedeuten diese Zahlen?

Stellen wir uns ein Quadrat auf einem Blatt Papier vor. Der Mittelpunkt des Quadrates befindet sich auf dem Blatt an einer X und an einer Y-Koordinate. Die beiden Spalten dienen dazu, die Verzerrung der jeweiligen Koordinate vorzunehmen.

Jede Spalte steht für einen Vektor und dieser hat wiederum einen x- und einen y-Wert. Dies sind die „inneren” Koordinaten des Quadrates. Wenn ich das Quadrat unverzerrt auf meinem Blatt darstellen will, heisst das, dass ich auf der X-Koordinate nur den x-Wert und auf der Y-Koordinate nur den y-Wert meines Quadrates um den Faktor „1” skalieren darf. Die entsprechende Matrix nennt man „Identitätsmatrix”:

10
01

Wollen wir das Quadrat um die Hälfte verschmälern, sähe die entsprechende Matrix so aus:

0.50
01

Jetzt wollen wir das Quadrat einmal auf der X-Achse scheren, so wie wir es in Illustrator mit dem „Verbiegen”-Werkzeug machen. Dazu müssen wir auch den y-Wert des „inneren” (lokalen) Vektors verändern:

10
0.51

Eine Matrix kann auch dazu verwendet werden, das Quadrat zu rotieren. In diesem Fall ist es wichtig, dass alle Werte im richtigen Verhältnis zueinander stehen. Wer sich mit Trigonometrie auskennt, ist im Vorteil:

cos(α)sin(α)
-sin(α)cos(α)

„α” ist in diesem Falle der Winkel (wichtig: in Radiant, nicht Grad), um den gedreht wird. Die Herleitung spare ich mir, es gibt schließlich Wikipedia.

Das, was wir hier an einer 2-dimensionalen Matrix gezeigt haben, gilt natürlich ebenso für den dreidimensionalen Raum. Allerdings brauchen wir dazu noch eine weitere Spalte für die Z-Achse und eine für die z Werte der einzelnen Vektoren.

Wir haben gelernt, dass die Vektoren in der unverzerrten, der Identitätsmatrix auf ihren Achsen immer den Wert „1” haben müssen. Die Identitätsmatrix für eine 3D Transformation sieht also folgendermaßen aus:

1000
0100
0010
0001

Diese kleine Demo ermöglicht, mit den einzelnen Werten herumzuspielen (funktioniert nur mit einem geeigneten Browser):

Moment - wieso auf einmal eine 4 x 4 Matrix? Würde eine 3x3 Matrix nicht reichen?

Wir haben in unseren Beispielen bisher mit einer vereinfachten Matrix gearbeitet. Tatsächlich enthält eine Matrix neben den Koordinaten für die einzelnen Vektoren aber auch noch weitere Angaben:

xxx Wx
yyyWy
zzzWz
TxTyTzW

Die Reihe T erlaubt es den Transformationsmittelpunkt zu verschieben, wir können mit dem T-Vektor das Objektalso auf der entsprechenden Achse bewegen.

Die Reihe W ist Tricky. Hier wird eine Perpektivprojektion bestimmt. W... ist die Koordinate des Blickpunktes auf der jeweiligen Achse. Im Regelfall wird man diese Einstellungen bis auf die Letzte auf 0 setzen. Ihr könnt in der Demo mit den Werten spielen, falls Ihr Euch die volle Packung geben wollt, googelt mal nach „homogenes Koordinatensystem” ;-).

Beispiel: Coverflow in CSS

Wir wollen nun mal an einem Beispiel den Einsatz von CSS Matrizen demonstrieren: Eine Bildergalerie im Stil von Apples Coverflow. Ich spare mir hier die Erklärungen und beschränke mich darauf, nur die entscheidenden Selektoren des CSS zu posten. Das Beispiel funktioniert ganz ohne Javascript und zusätzliche Hintergrundgrafiken. Dass wir die Rotation mit einer Matrix anstelle mit „rotateY” vornehmen dient lediglich der Demonstration. Achtet darauf, dass Ihr zum Betrachten den richtigen Browser verwendet. Für diejenigen, die kein Safari auf Leopard, bzw. Webkit haben gibt's ein Video:

Open Example div#stage{ -webkit-perspective: 600px; } img { -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.7s; -webkit-transform: matrix3d(0.7109, 0, -0.703279, 0, 0, 1, 0, 0, 0.703279, 0, 0.7109, 0, 0, 0, 0, 1); -webkit-box-reflect:below 15px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(#ff0000)); } img:hover { -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.7s; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 200, 1); }

That's it. wo früher 50 Zeilen Javascriptcode nötig gewesen wären reichen nun einige CSS-Angaben. Ist technischer Fortschritt nicht etwas wunderbares?

Trackback

2 Kommentare zu „The Matrix Revolutions (CSS 3D – 2)

  1. Kommentar by Kimcool Fr. 17. Sep 2010, 04:54

    OMG,It’s amazing for the Chrome,But I want to know the ie is all right?

  2. Kommentar by Darkpenguin So. 2. Jan 2011, 23:37

    Is is dead. Fallback to no transitions. Treat the new Webkit properties as extra chrome