This is a little showcase I build yesterday. I had some "leftover" illustrations from a recent project the client rejected, so I took this as an excuse to cobble together a little demo that uses all the fun CSS stuff: animations, transitions, transforms, 3D...

Open Example

These are cutting edge CSS-tricks. To be able to see it, you will need the latest Webkit- browser (if you are on a Windows-machine I recommend Safari/Win. The latest version of Chromium I tested, 66751, still has big problems with z-sorting and finding the right transform-origin):

Update: Most modern browsers now support CSS3 3D Transforms.

Nesting animations was fun (the tractor contains several nested animated block-elements). Z-sorting is still an issue with Webkit CSS3 3D transforms (sometimes you will see hidden elements shine through, though it seems as if the latest Safari-upgrade improved things somewhat - interestingly Safari/Win seems to behave better, Safari iOS behaves best), but in general I'm quite satisfied with the quality and smoothness of the animations. And with the help of trackball.js you are able to rotate the book freely and enjoy it from all sides.


8 Responses to “Showcase: Pop-Up Book in HTML and CSS”

  1. Comment by GAMilligan 03/11/2011

    outstanding :)

  2. Comment by Bebek sagligi 03/11/2011

    what is lastest chromium version?

  3. Comment by Simon Strandgaard 03/12/2011

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

  4. Comment by Dirk 03/13/2011

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

  5. Comment by Henriko 04/21/2011

    great w0rk!

  6. Comment by Isacco 03/16/2012

    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. Comment by Dirk 04/03/2012

    View source ;) ?

  8. Comment by ruvan 07/13/2012

    top notch!