There is a great tutorial on CSS Play that uses pure CSS to create flipbook style animation. The theory at work here is that there is there is a big stack of “slides” stacked on top of each other. On top of that is a series of tall rectangular “slices” made up of unique <a> elements. Each of the slides are pushed just outside of the div and the overflow is hidden, then when the :hover states are activated on the unique <a> elements the corresponding slides get moved back in, not unlike a typical CSS rollover. The result is that moving your mouse across the div activates different slides in really fun and addictive way.
This effect is a bit like the new “skimming” feature in iMovie ’08 on OS X. I bet some cool effects could be achieved with photographic images in sequence with this technique.
There is quite a bit of repetitive code and hard-coded pixel sizes, so this might be a cool project to try to tackle with Javascript so it could dynamically build a flip book with any size of image.
