Quantcast
Channel: Coding – eleqtriq
Viewing all articles
Browse latest Browse all 15

Showcase: Pop-Up Book in HTML and CSS

$
0
0

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.


Viewing all articles
Browse latest Browse all 15

Trending Articles