3D-Modelle mit Tridiv. Einfach schneller animiert.
Die Veröffentlichung des “CSS 3D Transform Model” von Tridiv hat Web-Entwicklern den Zugang zur 3D-Darstellung im Internet ermöglicht. Mit dem webbasierten Modellierungswerkzeug lassen sich einfach dreidimensionale CSS-Modelle erstellen. Und so einfach geht's!
Tridiv - und “die Macht sei mit dir.”
Mit dem “X-Wing” aus Star Wars wird uns gleich zu Beginn ein beeindruckendes Beispiel-Modell zur Schau gestellt. Und das Ganze nur mit CSS! Spätestens hier stellt sich die Frage, ob sich hinter dem französischen Autor Julian Garnier in Wahrheit nicht doch ein CSS-Yedi verbirgt. Denn schnell wird klar – mit der Web-App Tridiv ist einiges möglich!
Kurz vorweggenommen:
Laut Entwickler würde Tridiv auf allen gängigen Browsern funktionieren, die das CSS-Property transform-style: preserve-3d unterstützen. Aus Performance-Gründen wird das Tool vorerst jedoch nur auf den Webkit-Browsern Chrome und Safari angeboten.
3D animieren war noch nie so einfach
Die Oberfläche von Tridiv bringt alle notwendigen Funktionen mit, um komplexe 3D-Modelle direkt im Browser zu erschaffen. Aufgebaut werden die Modelle mit einfachen Formen: Rechtecke, Zylinder, Prismen und Dreiecken. Ist die gewünschte Form gefunden, kann sie nach Belieben verschoben und transformiert werden.
Wechselt man von der “Editor-Ansicht” in die “Vorschau-Ansicht”, kann man hier noch mit Licht und Schatten spielen und so gewünschte Effekte erzielen. Das Tolle an dieser Ansicht: Der HTML & CSS Code wird direkt dargestellt! Mittels Copy-Paste kann der Code in das eigene Projekt übernommen, oder über CodePen bearbeitet werden - zur Code-Ansicht.
Der X-Wing im Detail.
Bevor wir uns das Ganze im Detail ansehen, möchte ich vorweg noch auf einen weiteren Blog verweisen. Erfan hat zum Thema CSS-3D Modellierung bereits eine tolle Einführung gegeben.
Zur Erklärung lade ich nun den X-Wing aus den Beispielen in das Trivid. Ich werde hier nur auf interessante CSS Propertys eingehen, die für die 3D-Visualisierung zuständig sind.
Hinweis: Bei folgenden Properties wurde zur Vereinfachung des Codes auf ein Browser-Prefix verzichtet, da das JS Plugin “-prefix-free” zum Einsatz kommt. Je nach Browser muss davor üblicherweise ein “-webkit-”,“-moz-” oder “-ms” hinzugefügt werden. Das Plugin erübrigt diese umständliche Verwendung. Und hier kannst du es herunterladen: -prefix-free kostenlos downloaden
Und los geht’s!
Ein Tridiv-Modell wird von einem “ Das perspective Property gibt die Entfernung zu den Kind-Elementen (Formen) in Pixel an und definiert die Sicht auf das 3D-Modell. Umschlossen wird das Modell von einem weiteren“ Diese Eigenschaft wird per JavaScript gesetzt. Über die Benutzereingabe mit der Maus ist eine manuelle Rotation des Models möglich. Das Model setzt sich aus unterschiedlichen Formen zusammen und ist nach folgender HTML-Struktur aufgebaut: Beispiel Viereck: Jede Form ist ein “Shape” und bekommt eine eigene CSS-Klasse. Mit der Transform-origin Property kann die Position eines transformierten Elementes verändert werden - bei 3D-Elementen die x-, y- und z-Achse. “Faces” repräsentieren die Flächen einer Form. Ein Rechteck bekommt damit zum Beispiel sechs Kind-Elemente mit der Klasse „Face“ zugeteilt. Mit transform Property wird die Ausrichtung und Position der Fläche bestimmt. Das Property rotateX ist für die Rotation an der x-Achse zuständig und translateY für die Verschiebung entlang der Y-Achse.#tridiv {
perspective: 800px;
}
.scene {
transform: rotateX(-144deg) rotateY(-100deg);
}
.shape {
transform-style: preserve-3d;
transform-origin: 50%;
}
[class*=”cuboid”] .tp {
transform: rotateX(deg) translateY(-50%);
}
Mein Fazit
Man merkt sehr schnell, wie komplex 3D-Modellierungen mit CSS im Detail wirklich sind. Umso beeindruckender ist es dann, dass es mit Trivid nun ein Werkzeug gibt, welches Web-Entwicklern diese Arbeit abnimmt. Mit CSS3 erzielt man mittlerweile tolle WOW-Effekte auf Webseiten. Aufgrund mangelnder Browserunterstützung sollte man den Einsatz von CSS3-Modellen sowie Animationen jedoch noch mit Bedacht genießen.
(Bildquelle: http://tridiv.com)
