How to Use?
Something goes here
makeflip(<DOM selector>,<width>,<height>,<html array of content>);
How Code Works?
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
Problem with 180 flip is your HTML content goes upside down, to simulate flipboard like animation you can not flip it complete 180 degrees.
This code flip 90 degree for first half of the flip and back to zero degree for second half of the flip, To fake half page flip it adds mask at the top during the first half of the flip and then, mask moved down for the second half.
Problems on iPhone's Safari
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.
Touch Events of iPhone Touch events on iPhone have some serious problem, i encountered weird problem with event propagation.
- It flickers sometime
- Works only on chrome and iPhone
You can see working Demo Here http://www.purplegene.com/static/flip3.html