flipbook in CSS3. A page flip done with CSS3

December 8, 2011 / by / in CSS3, jQuery

flipbook in CSS3. A page flip done with CSS3

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.

jQuery examlpe

the best jQuery page flip I could find is: builtbywill.com

CSS3 examlpe

The best CSS3 page flip I could find: romancortes.com

HTML5 examlpe

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”.
animated CSS3 pageflip
animated CSS3 page flip
animated CSS3 page flip flipbook
animated CSS3 page flip

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… 😉

click the button to go to the new demo
Demo

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,  
Follow me

Gregor Adams

web developer at Codefights
Hi, I am a web-programmer and frontend-developer from Germany.
I specialize in CSS, HTML and JavaScript. As I am a huge fan and also a student of open-source, I try to help other programmers (especially newcomers) as much as I can. I am also very happy for "true" criticism. So feel free to ask any question you like and I will try to give the best possible answer.
Follow me

Latest posts by Gregor Adams (see all)

Tags:

Hi, I am a web-programmer and frontend-developer from Germany. I specialize in CSS, HTML and JavaScript. As I am a huge fan and also a student of open-source, I try to help other programmers (especially newcomers) as much as I can. I am also very happy for "true" criticism. So feel free to ask any question you like and I will try to give the best possible answer.

  • Prodyot

    Hi Gregor

    Great flip book.
    I haven’t tried the codes yet but as it is working on your site I am sure it will work everywhere.
    The main point is-you did an amazing job.
    Hats off to you.
    By the way, will it be possible to make it smooth flipping?
    Keep the good things going.

    • try this alpha version with drag flipping:
      http://webkit-os.pixelass.com/flipbooktest…..

      • Prodyot

        Gregor
        Thanks for the prompt response and the link to your website.
        I tried out the flip book there and it is simply superb.
        You have coded a great flip book.
        The “Copyright” thingie scared me so I didn’t peep into the “page source” 🙂
        Thanks bud.
        Good luck.

        • feel free to use the code. I will post a new tutorial in a few weeks including the full source code

  • V’Spirit Cruises

    This flip book works well but it needs more smooth something like turnjs.

    • It’s just a proof of concept. I really didn’t put too much effort in it. I basically wantet to test the behavior of border radius and how it can be used to create the optical illusion of a flipped/bent page

  • fazeela abu zohra

    hello sir
    can you please provide the entire code package in one of the links
    thank you