A few days ago I thought about making a flipbook animation in CSS3. I have seen quite a few approaches, yet none with a decent 3d effect.
the best jQuery page flip I could find is: builtbywill.com
The best CSS3 page flip I could find: romancortes.com
And this one using HTML5 canvas is really amazing: 20thingsilearned.com
3d flipbook without a HTML5 canvas?
But how would we go about a 3d effect with a bent page without the use of a HTML5 canvas?
Well CSS3 is powerful enough to create a similar effect. Watch the screenshotss below or try it live on “Google Chrome”.
Sadly this only works in Google Chrome. Here’s a small fiddle.
I will try to make this cross-browser-compatible with nice degration for non CSS3-browsers. I will also try to make it react to dragging instead of clicking. So I guess… more to come soon… 😉
the new demo works in Safari, Chrome, Opera and Firefox (maybe IE9+ ???) and supports dragging.
Incoming search terms:
jquery flipbook, flipbook html5, flipbook jquery, css flip book, html5 flipbook, flipbook jquery free download, page flip jquery free download, jquery page flip, page flip jquery, css3 flip book, free jquery flipbook, pageflip jquery, jquery pageflip, jquery flip book, jquery flipbook animation,