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 Fri Mar 11th, 2011, 05:52

    outstanding :)

  2. Comment by Bebek sagligi Fri Mar 11th, 2011, 21:19

    what is lastest chromium version?

  3. Comment by Simon Strandgaard Sat Mar 12th, 2011, 21:44

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

  4. Comment by Dirk Sun Mar 13th, 2011, 12:23

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

  5. Comment by Henriko Thu Apr 21st, 2011, 15:05

    great w0rk!

  6. Comment by Isacco Fri Mar 16th, 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. Comment by Dirk Tue Apr 3rd, 2012, 23:21

    View source ;) ?

  8. Comment by ruvan Fri Jul 13th, 2012, 23:51

    top notch!