“Today we want to share an HTML5 experiment using 3D transitions and layout to recreate a touch screen publication. It’s inspired by the famous Flipboard app where a seamlessly “normal” page flips like a page in a book when swiped. We’ve tried to re-create that effect using CSS 3D transforms and JavaScript, making a layout that is “flippable” and responsive. While the swiping makes sense for touch devices, dragging will do for normal browsers.

The HTML is build up of a main wrapper with the class container and the ID flip. Inside, we’ll have all the pages, the first one being the cover and the last one being the back of the booklet. The other pages will contain some title element and boxes.”

view demo http://tympanus.net/Development/FlipboardPageLayout/
via http://tympanus.net/codrops/2012/05/07/experimental-page-layout-inspired-by-flipboard/
Read More




