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...
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.
what is lastest chromium version?
Incredibly cool. It’s interactive and very responsive. Great graphics too.
Hi Bebek, Chromium Versions change almost daily. Check out http://build.chromium.org/f/chromium/snapshots/ for the latest version.
any chance to be able of seeing your CSS to study it???
I wanna create somenthing similar but never played with webkit transform…
View source ;) ?