Replicating Flipboard's "page fold" animation with CSS 3D transforms and transitions #

Flipboard is an iPad app that has a distinctive "page fold" animation when going from page to page (visible in their intro video. I was curious if it's possible to replicate this effect using CSS 3D transforms and transitions. It seems to be (the demo works in Safari 5.0, WebKit nightly builds and to some degree in Chrome with accelerated compositing enabled)

The trickiest part about this was that 3D transforms are applied to the whole DOM node, but we only want to transform half of it for each fold. The best way to accomplish that for now is to clone the node to be transformed and then only show half of each clone, transforming each one separately. You can see that in a variant of the demo where "creases" are enabled (each half is outlined in a different color).

9 Comments

very neat indeed
wou that is great... way to develop "news reading" without flash... I am very interested if you are willing to share code on blog? tnx
@Jutro: You can see the code in the JS and CSS files referenced by http://persistent.info/webkit/flipboard/flipboard.html.
wow, great work Mihai!!
I have a question, how to flip it vertically instead of horizontally ?
Thank you!
@Sam: You'll have to change the CSS and JS in flipboard.js and flipboard.css to use marginLeft/marginRight, rotateX instead of rotateY, etc.
Hello, thx for this demo, im tryin to use it for a mobile web app, it works fine on iOS, but not on Android 2.3, elements rotate on Z-axe instead of X or Y axes. Do you have an idea ?
Can you please share the code of this
apptestgenerate@gmail.com
@hockey test: The code is at https://github.com/mihaip/web-experiments/tree/master/flipboard

Post a Comment