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).
10 Comments
I have a question, how to flip it vertically instead of horizontally ?
Thank you!
apptestgenerate@gmail.com
Post a Comment