jquery/css folding animation effect

Question

How to create the effect of folding 'div' horizontally by click on child (see below)?

Answer 1

The effect is achieved by two flat planes that fold over each other using CSS 3D. (perspective & transforms)

The flat planes need to show the content, but as they are two separate elements, we need to take our original content and duplicate the DOM into both of the planes of our fold.

Then using CSS transitions to animate the folds transforming.

The more folds you have, the more flat planes you need with duplicates of the content inside of them.

An example of a full implementation would be: http://felixniklas.com/paperfold/