Eines der Experimente auf dem großartigen Codrops-Blog hat mich dazu inspiriert, mich detaillierter mit CSS 3D-Transforms auseinanderzusetzen. Die experimentelle Galerie hat mir schon eine solide Grundlage für mein Projekt geliefert. Sie ist allein aus HTML-Elementen zusammengesetzt, die im 3-dimensionalen Raum verschoben wurden. Mein Ziel war nun, die Galerie so zu erweitern, dass man auch an die einzelnen Bilder herantreten kann. Die Logik, die hinter der Verschiebung des sichtbaren Feldes steckt, ist dabei keine “Kamerafahrt”, wie man es aus den üblichen 3D-Programmen kennt (z.B. Cinema 4D). Stattdessen bleibt der Viewport derselbe und das sichtbare Element, also der HTML-Container, in den die Galerie-Elemente geschachtelt sind, wird entsprechend transformiert (transform: translate3d() rotate3d()).
Link zum 3D Space
Eine der Schwierigkeiten, auf die ich bei dieser Erweiterung gestoßen bin, ist die Auflösung von Bild- und Textelementen, die über die 3D-Transformation heran gezoomed werden. Weil diese tatsächlich einfach verschoben werden, anstatt sie neu zu rendern, behalten sie die sonst selbstverständlichen Vektorgrafik-Vorteile von HTML nicht bei. Anders gesagt: Das Bild, dass am hinteren Ende der Galerie mit einer Breite von 600px gerendert wurde, behält auch nachdem es heran gezoomed wurde, diese 600px Breite bei. Noch auffälliger ist dies beim Text der Bildunterschriften, der – anstatt wie gewohnt gestochen scharf – extrem verpixelt erscheint. Um diese Problem zu lösen, hatte ich am Innovation Day leider keine Zeit mehr. Aber eine mögliche Lösung wäre es, die Texte in größerer Schriftgröße aber kleiner skaliert (transform: scale()) zu rendern, um effektiv eine höhere Auflösung zu erzwingen.
