Anders Tornblad, web developer

I'm all about the web

Monthly archive for January 2011

Almost pure CSS page flip

Google Chrome still has a long way to go when rendering stuff that is a just little bit more advanced. Experimenting with CSS3 3D Transforms.

I placed a video element on a div element that rotates in 3D using CSS3 3D Transforms and CSS3 Transitions. In Safari, everything renders smoothly, even when the video is playing! In Chrome (I’m using Google Chrome 9 Beta), the entire div containing the video disappears while the transition is running.

That experiment led to more experimenting, and suddenly I had a fully functioning page flipping effect – almost purely done in CSS. Using a simple combination of -webkit-tranform-origin and -webkit-transform went a very long way.

Actually, the contents of the project explains itself. If you are using Google Chrome or Desktop Safari on Windows or Mac, use the scroll wheel to flip through pages, or click on a page. If you are on an iOS device, flick a page to go forward or backward.

Please note! This works best on Safari and on iOS devices. Google Chrome does support CSS 3D Transforms, but only if you actively enable it. Type about:flags into the address bar of your Google Chrome browser, and click Enable for GPU Accelerated Compositing to enable 3D CSS in Chrome, then restart the browser.

The experiment is called CSS Flip. Please try it out now on demo.atornblad.se/cssflip and tell me what you think.