Showcase: Pop-Up Book in HTML and CSS
This is a little showcase I build yesterday. I had some "leftover" illlustrations 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...
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):
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.Tweet me!"