Flipboard Like UI on iPhone Safari ( JavaScript + CSS3)

I was trying to make Flipboard like UI in CSS3 and JavaScript!! I quickly made it to work on chrome, but it sucked on iPhone, and it took ages for me to make it work.

How I made it?

My approach is simple I used basic CSS3 attribute

-webkit-transform: rotateX(180deg);
-webkit-transition-duration: 2s;

Step-1:
To achieve complete flip of a page you need to add CSS style of -webkit-transform: rotateX(180deg);

Demo-0

Problem with 180 flip is your HTML content goes upside down, to simulate flipboard like animation you can not flip it complete 180 degrees

Step-2:
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.

Fork on GitHub