eleqtriq

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:

Update: mittlerweile unterstützen fast alle modernen Browser CSS3 3D Transformationen.

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.

Trackback

8 Kommentare zu „Showcase: Pop-Up Buch mit HTML und CSS“

  1. Kommentar by GAMilligan Fr. 11. Mär 2011, 05:52

    outstanding :)

  2. Kommentar by Bebek sagligi Fr. 11. Mär 2011, 21:19

    what is lastest chromium version?

  3. Kommentar by Simon Strandgaard Sa. 12. Mär 2011, 21:44

    Incredibly cool. It’s interactive and very responsive. Great graphics too.

  4. Kommentar by Dirk So. 13. Mär 2011, 12:23

    Hi Bebek, Chromium Versions change almost daily. Check out http://build.chromium.org/f/chromium/snapshots/ for the latest version.

  5. Kommentar by Henriko Do. 21. Apr 2011, 15:05

    great w0rk!

  6. Kommentar by Isacco Fr. 16. Mär 2012, 01:47

    Great Job!

    any chance to be able of seeing your CSS to study it???
    I wanna create somenthing similar but never played with webkit transform…

  7. Kommentar by Dirk Di. 3. Apr 2012, 23:21

    View source ;) ?

  8. Kommentar by ruvan Fr. 13. Jul 2012, 23:51

    top notch!