How I made it?
My approach is simple I used basic CSS3 attribute
-webkit-transform: rotateX(180deg); -webkit-transition-duration: 2s;
To achieve complete flip of a page you need to add CSS style of -webkit-transform: rotateX(180deg);
Problem with 180 flip is your HTML content goes upside down, to simulate flipboard like animation you can not flip it complete 180 degrees
Then i decided to just flip 90 degree and back to zero degree Demo-1, To fake half page flip i added a mask on it so that one half of animation is not visible Demo-2.
With this concept of mine I went ahead and made full page flip demo for iPhone here Demo-3.
Scan to see demo on iPhone
Problems on iPhone's Safari
1) z-order problem on webkit, with 3D transform
This mask thing could not work properly because In iPhone's safari when a object is 3D transformed , z-order does not work properly. I worked around it by making one half of page to transparent.
2) Touch Events of iPhone
Touch events on iPhone have some serious problem, i encountered weird problem with event propagation.
Feel free to ask any question about the Demo, Please let me know if You have better solution to emulate Flipboard UI.