eleqtriq

Showcase: Pop-Up Buch mit HTML und CSS

Ein kleines Showcase, das ich gestern gebastelt habe. Ich hatte noch einige „übriggebliebene" Illustrationen von einem Projekt, die dann vom Kunden aber leider abgelehnt worden waren. Das reichte für mich als Entschuldigung um mal all die spaßigen neuen CSS-Properties auf einmal einzusetzen: Animationen, Transitions, Transformationen, 3D...

Bespiel öffnen

Es handelt sich hier um ziemlich fortschrittliche CSS-Tricks. Um die Animationen sehen zu können braucht Ihr eine allerneueste Webkit-Version (solltet Ihr mit Windows unterwegs sein, rate ich dazu Safari/Win zu verwenden. Chromium hat leider in der letzten Version die ich getestet habe, 66751, noch große Probleme mit der Z-Sortierung und damit, den „Transform-Origin” korrekt zu platzieren:

• entweder den aktuellen Chromium für Windows
• oder Safari 5.0.2 für Windows oder Mac

Besonders unterhaltsam war es, Animationen zu verschachteln (der Traktor enthält mehrere verschachtelte animierte Block-Level-Elemente). Z-Sorting ist immer noch ein Problem mit den Webkit CSS 3D-Transforms (Manchmal sieht man hintenliegende Elemente in den Vordergrund blitzen. Das letzte Safari-Upgrade hat die Situation anscheinend etwas verbessert und interessanterweise verhält sich Safari/Win sogar noch etwas besser, Safari für iOS am besten.), aber im Großen und Ganzen bin ich recht zufrieden mit Qualität und Flüssigkeit der Animationen. Mit der Hilfe von trackball.js könnt Ihr das Buch sogar frei rotieren und von allen Seiten betrachten.