Transformationen mit CSS3 – Teil 2 (3D)

Vor wenigen Tagen haben wir kurz in das Modul 2D-Transformationen in CSS3 geschaut, welches ja mittlerweile von allen moderneren Browsern unterstützt wird, möchten wir heute ein darauf aufbauendes weiteres CSS3-Modul blicken, welches noch ein wenig neuer und auch etwas komplizierter bzw. umfangreicher ist: Transformationen in der 3. Dimension. War es bisher nur möglich, die HTML-Elemente in zwei Dimensionen – nämlich der x- und der y-Achse – zu modifizieren, kommt nun noch eine dritte Achse für die räumliche Tiefe hinzu: die z-Achse.

Wer sich vor dem Weiterlesen dieses Artikels gerne erst einmal die Spezifikation des W3C durchlesen möchte, kann das hier gerne tun. Wer dagegen schon vorher weiß, dass er aus dem recht abstrakten Geschreibsel eh nicht schlau wird, kann sich das auch sparen und liest einfach sofort weiter. Wie immer hoffen wir, dass unser kleiner Lehrgang doch ein wenig verständlicher ist… ;-)

Frage 1: Was brauche ich für 3D-Transformationen?
Um überhaupt erst einmal etwas über die 3D-Transformationen verstehen zu können, muss man natürlich erst einmal die Funktionsweise der 2D-Transformationen verstanden haben, da der folgende Text das Wissen aus dem 1. Teil dieser Miniserie über Transformationen voraussetzt.
Des Weiteren wird einer der folgenden Browser benötigt: Mozilla Firefox 10.0+, Google Chromium 12.0+, Safari 4.0+ und alle darauf aufbauenden Browser. Nischenprodukte wie der Opera oder der Internet Explorer unterstützen die 3D-Transformationen nicht. Für den zweiteren ist diese Funktion aber zumindest für die Version 10 vorgesehen. Doch abgesehen davon funktionieren die 3D-Transformationen auch in so manchem Browser, der laut Hersteller diese unterstützt, eher schlecht als recht. Beispielsweise funktionierten die unten aufgeführten Beispiele bei uns in Chromium 17 nicht überall. Mit einer Chromium-Installation lieferten die Gegenüberstellungen in den Beispielen keine Unterschiede, bei einer anderen wurde dagegen alles angezeigt, wie erwartet.

Frage 2: Welche CSS-Eigenschaften stehen mir zu Verfügung?
Die folgenden Eigenschaften stehen für 3D-Transformationen zur Verfügung (wie immer werden die bekannten Browser-Präfixe der Übersichtlichkeit wegen ignoriert):

• transform: Diese Eigenschaft funktioniert genauso wie bei den 2D-Transformationen. Hier kommen jedoch noch weitere mehr oder weniger nützliche Transformations-Funktionen hinzu, die dann weiter unten noch erklärt werden.
• transform-origin: Auch diese Eigenschaft funktioniert nahezu genause wie bei den 2D-Transformationen. Hier ist aber noch ein zusätzlicher dritter Wert für die z-Achse hinzugekommen, welcher momentan jedoch nur Längen-Angaben akzeptiert (z.B. 5px, -4em, …), keine Prozent-Angaben. Standardwert für diesen dritten Parameter ist 0.
• transform-style: Diese Eigenschaft gibt an, in welcher Reihenfolge ineinander verschachtelte Elemente im dreidimensionalen Raum angezeigt werden. Hierzu gibt es zwei Werte: flat (Standardwert!) bewirkt, dass die Kindelemente in die x-y-Ebene des Elternelementes projiziert werden und immer vor dem Elternelement gezeigt werden (auch wenn sie einen negativen z-Wert besitzen), andernfalls kann man mit preserve-3d erreichen, dass Kindelemente immer ihre tatsächliche Position auf der z-Achse beibehalten. Erklärende Beispiele finden sich hier.
• perspective: Mit dieser Eigenschaft lässt sich einstellen, aus welcher Perspektive die Kindelemente des entsprechenden Elements angezeigt werden sollen. Genauer genommen wird hier die Entfernung des Betrachters zur x-y-Ebene bei z=0 angegeben. Erlaubt sind nur positive Werte, Standardwert ist 0 bzw. none. Erklärende Beispiele finden sich hier.
• perspective-origin: Hiermit lässt sich angeben, von welcher Position in der x-y-Ebene aus die perspective-Eigenschaft angewendet wird. Angegeben werden hier wieder ein oder zwei Werte – der erste betrifft die x-Achse und der zweite, falls angegeben die y-Achse. Erlaubt sind Längen-Angaben, Prozent-Angaben, sowie die Ausrichtungen top, bottom, left, right und center. Standard ist “50% 50%”. Erklärende Beispiele finden sich hier.
• backface-visibility: Mit dieser Eigenschaft lässt sich angeben, wie Elemente angezeigt werden sollen, wenn sie von der Rückseite betrachtet werden. Zur Verfügung stehen hierbei zwei verschiedene Werte: Zum Einen hidden – hier wird das Element in der Rückansicht nicht angezeigt – und zum Anderen visible (Standard) – hier wird das Element durchsichtig angezeigt (d.h. man sieht die Vorderseite, nur eben entsprechend gespiegelt). Erklärende Beispiele finden sich hier.

Frage 3: Und welche Transformations-Funktionen gibt es?
Die Funktionen aus dem Modul zu den 2D-Transformationen sind natürlich auch in diesem Modul weiterhin verfügbar. Viel interessanter sind dann aber die folgenden, neuen Funktionen (die im Übrigen auch schon teilweise in den Beispielen oben verwendet wurden:

• perspective(<Zahl>): Ähnlich wie die gleichnamige eigenständige Eigenschaft, funktioniert auch diese Funktion. Sie unterscheidet sich nur dadurch, dass hier die Eigenschaft auf das Element selber angewendet wird und nicht auf die Kindelemente. Zudem dürfen hier nur Zahlen, keine Längen angegeben werden.
• rotateX(<Winkel>) / rotateY(<Winkel>) / rotateZ(<Winkel>): Mit diesen drei Funktionen lässt sich das jeweilige Element um die im jeweiligen Funktionsnamen angegebene Achse drehen. Erlaubt sind hier natürlich wieder die gleichen Werte wie bei rotate() (d.h., 45deg, 3.14rad, …). Im Übrigen entspricht rotateZ() der eben genannten rotate()-Funktion. Erklärende Beispiele finden sich hier.
• rotate3d(<Zahl>, <Zahl>, <Zahl>, <Winkel>): Mit dieser Funktion lassen sich auch komplexe Rotationen realisieren. Hierbei beschreiben die ersten drei Parameter, die nur Zahlen und keine Einheiten erlauben, einen Vektor (x,y,z) (in dieser Reihenfolge), der vom Ursprung des Koordinatensystems ausgeht und der die Rotationsachse darstellt, um die das Element um den im vierten Parameter angegebenen Winkel im Uhrzeigersinn gedreht wird. Angemerkt sei, dass das Ergebnis bei einem Vektor (1,2,3) gleich dem Ergebnis (2,4,6) ist, da der Vektor immer zunächst normiert wird. Erklärende Beispiele finden sich hier.
• scale3d(<Zahl>, <Zahl>, <Zahl>) / scaleZ(<Zahl>): Zusätzlich zu den bereits bekannten scale-Funktionen kommt für 3D noch scaleZ() zum Skalieren auf der z-Achse sowie die Funktion scale3d(), welche die Funktion scale() um die z-Achse erweitert.
• translate3d(<Länge>, <Länge>, <Länge>) / translateZ(<Länge>): Genauso wie bei scale werden auch hier einfach die bereits bestehenden Funktionen um die z-Achse nach gleichem Muster erweitert.
• matrix3d(<Zahl>¹⁶): Für den Praxiseinsatz wohl eher weniger geeignet ist diese Funktion mit insgesamt 16 Parametern deren Bedeutung wir hier nicht weiter erläutern werden, damit der Artikel nicht noch unnötog länger wird, als er sein muss. Wer die Bedeutungen genau wissen will, kann sie durch experimentieren mit dieser Funktion durchaus auch selber herausfinden… ;-)

Übrigens gibt es keine Funktionen skew3d() oder skewZ(), was wohl damit zu begründen ist, dass diese so oder so wirkungslos wären…

Frage 4: Und nun?
Damit wären wir am Ende unserer kleinen Mini-Serie zu Transformationen in CSS3. Demnächst wird es dann wieder mit Animationen in CSS3 weiter gehen. Wer zu diesem Kapitel aber noch Fragen hat, kann diese gerne in den Kommentaren stellen…