FLIP UI is pure html, javascript solution to bring flipboard like UI in iPhone as webpage.
Something goes here
makeflip(<DOM selector>,<width>,<height>,<html array of content>);
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);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.
-
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.
http://www.markandey.com/2011/12/flipboard-like-ui-on-iphone-safari.html
- It flickers sometime
- Works only on chrome and iPhone
You can see working Demo Here http://www.purplegene.com/static/flip3.html