Paper folding animation effect is one of the newly introduced effects mainly available in touch devices. It works well with touch gestures, such as swiping to certain direction to reveal content underneath by "folding" the current view. It's a fancy effect and definitely giving its users a cool experience.
Over our sister site favbulous, we have published a post called Paper Folding Effect in App Design, and here in queness, we are going to give you all the resources that would able to achieve paper folding effect in web development. What you have to know is, this effect uses CSS 3D transform such as scale, rotate, skew etc and will work with browsers that supported it. Some of these resources are conceptual and experimental, but they do give you a glance of what lies ahead in the future of web development.
- 3D Thumbnail Hover EffectA tutorial from codrops. Impressive manipulation of CSS to generate 3D thumbnail hover effects. It contains 4 types of hover effects and explained in the tutorial. If you want to learn how to make one, you should check this out.
- Paper Like Unfolding EffectAnother tutorial from codrops. A different kind of paper folding from the tutorial called PFold: Paper-like Unfolding Effect. It's an experimental jQuery plugins that let's you unfold elements to reveal more content just like on a piece of paper.
- Paperfold CSSThis could be the earliest working example of paper folding effect. Showcased in Mozilla Developer Network, this plugin takes a DOM element, slices it into parts and arranges them like a folded paper in 3D space.
- Folding HTML ViewCreated by the author of the open source web interface component for mobile devices App-UI. This is the combination of Web UI sliding view and Oridomi folding plugin mentioned above.
Just as a reminder again, I'm pretty sure all of them won't work in IE 9 and below, but if you're targeting mobile platform or safari or chrome, these resources will certainly be helpful. Well, I reckon you still can use it as long as you make it degrade gracefully for other unsupported browsers or devices.