Tridiv: Interessanter CSS3-Editor für 3D-Objekte

Die gestalterischen Möglichkeiten von CSS3 sind vielfältig. Neben Animationen lassen sich dank der „transform“-Eigenschaft Elemente auch dreidimensional darstellen. Mit einigen Kniffen können sogar dreidimensionale Objekte ausgezeichnet und im Raum angeordnet werden. Mit etwas JavaScript sind auch 3D-Animationen möglich. Die Webanwendung Tridiv stellt eine grafische Benutzeroberfläche zur Verfügung, mit der solche dreidimensionalen CSS3-Objekte erstellt werden können.

Einfache Formen erstellen und gestalten

Weder HTML5 noch CSS3 sind dafür geeignet, komplexe 3D-Objekte zu erschaffen. Aber zumindest geometrische Grundformen können einfach und recht schnell ausgezeichnet werden. Dazu bedarf es einiger HTML-Elemente und etwas CSS3. Tridiv stellt solche Grundformen zur Verfügung. Möglich sind Quader, Zylinder, Prisma und Pyramide. Je nach Form werden diese aus unterschiedlich vielen „<div>“-Elementen zusammengesetzt. Dabei stellt jedes Element eine Seite der Form dar. Per CSS3 werden die einzelnen Formen dreidimensional zueinander angeordnet.

Dazu schafft man mit „transform-style“ und der Eigenschaft „preserve-3d“ einen Raum, in den die einzelnen Elemente dank der „translate“-Möglichkeiten unterschiedlich platziert werden können.

Editor mit vier Ansichten

Tridiv stellt dazu eine Arbeitsfläche zur Verfügung, auf welche die 3D-Grundformen platziert werden. Die Anordnung der einzelnen „<div>“-Elemente eines Form zueinander erledigt Tridiv. Jede Form kann jedoch über verschiedene Regler sowie Eingabe- und Auswahlfelder verändert werden. Größe und Farbe sind ebenso frei zu definieren wie die Opazität.

Bilder als Textur verwenden

Statt die einzelnen Seiten einer Form nur mit einer Farbe zu versehen, kann man sie mit einem Bild als Textur versehen. Dabei gibt man für alle Seiten ein Bild oder für jede Seite ein anderes Bild an.

Bild als Textur für Seiten einer 3D-Form

Bilddateien werden dabei nicht hochgeladen, sondern als URL übergeben. Die zu verwendenden Bilder müssen also bereits irgendwo im Web vorhanden sein, um sie einsetzen zu können. Die Bilder werden jeweils über die gesamte Seite skaliert und nötigenfalls verzerrt.

Formen im Raum anordnen

Der Editor besitzt vier verschiedene Ansichten in der Arbeitsfläche. Die erste Ansicht stellt die Formen in der 3D-Ansicht dar. Die anderen drei Ansichten zeigen die Formen zweidimensional auf den drei Raumebenen. So können Elemente einfach auf der Fläche der X- und Z-Achse, der Z- und Y-Achse sowie der X- und Y-Achse verschoben und gedreht werden.

Auch wenn die einzelnen Formen nur sehr einfach gehalten sind, so können sich durchaus komplexe 3D-Objekte aus einer Vielzahl dieser Grundformen zusammensetzen. Beispiele auf der Website zeigen, dass sogar ein X-Wing aus etwas HTML und CSS3 entstehen kann.

In der 3D-Ansicht kann man den Blickwinkel nach Belieben verändern. So lassen sich die Formen von allen Seiten begutachten. Entsprechende Hilfslinien geben Orientierung und verraten, wo sich die einzelnen Achsen befinden.

Vorschau und Einbindung

Per Regler wechselt man zwischen Editor und Vorschau einfach hin und her. In der Vorschau werden die Formen ohne Hilfslinien angezeigt. Um die 3D-Welt in ein anderes Projekt einzubinden, gibt es zwei Möglichkeiten. Zum einen kann man den HTML- und CSS-Quelltext kopieren. Hier hat man dann jedoch keine interaktive Ansicht der 3D-Ansicht. Das heißt, eine Bewegung des 3D-Objektes ist nicht möglich.

X-Wing aus HTML und CSS3

Allerdings besteht zudem die Möglichkeit, die 3D-Ansicht per Iframe einzubinden. Hierbei hat man den Vorteil, dass man sich per Drag-&-Drop nach Belieben innerhalb der 3D-Ansicht bewegen kann. Außerdem ist es möglich, die Ansicht zu vergrößern oder zu verkleinern.

Keine Anmeldung nötig

Besonders erwähnenswert ist es, dass die Nutzung von Tridiv keine Anmeldung für die Webanwendung erfordert. Selbst das Speichern von Projekten ist möglich. Diese werden nicht etwa über ein Benutzerprofil, sondern im lokalen Browser-Speicher („localStorage“) gespeichert.

Der Nachteil dieser Methode ist natürlich, dass bei Neuinstallation des Browsers die gespeicherten Projekte wieder verloren sind. Da alle Projekte aber zusätzlich serverseitig gespeichert werden, ist jedes Projekt über eine eigene URL erreichbar.

Fazit

Tridiv zeigt sehr schön die technischen Möglichkeiten von 3D-Animationen mittels HTML und CSS3. Sicherlich ist vieles mehr als Spielerei zur verstehen. Aber hier und da lassen sich doch für eigene Webprojekte einfache 3D-Formen erstellen und gestalten. Die Bedienung ist einfach und intuitiv.

(dpe)