Your browser doesn't seem to support CSS Transforms.


This demo shows how using CSS transformations on a lot of div's can be used to create a 3D effect.

Every face of the phone (front, sides, corners) is one div in the HTML source code. These are styled (with background images) and absolutely positioned using CSS. Then JavaScript calculates a 3D transition for every face (based on the mouse position), and applies that transformation using CSS.

As every face is simply an HTML div, it's very easy to apply different textures (using CSS backgrounds) or add things like the iframe on the phone's front.

Naturally, this demo does not work in Internet Explorer. The 3D transformation uses either moz-transform or webkit-transform, depending on your browser.

The 3D rendering is far from perfect; you can see small holes in the phone's rounded corners sometimes, and the iframe's scrollbar is not transformed properly. But it's nice as a tech demo, I think.

Many thanks to web dev ninja Addy Osmani, this demo was based on his 'CSS 3D Box' work.