Dabbling in CSS3 3D transformations

Although already supported by Webkit browsers (Safari and Chrome) and Firefox 10+, CSS3 3D transforms won't be supported in IE until version 10. However, despite a lack of support in 'desktop' browsers, thanks to their origin in Webkit, they are well supported in Android (v3 onwards) and iOS (all versions).

Suffice to say, from this point on, you'll be best off checking your results in a Webkit based browser such as Chrome or Safari (unless, of course, you're reading this at a time when your browser of choice does support 3D transformations).

Now, we're just going to dabble in 3D transformations here. They're a vast subject and the possibilities are virtually infinite. I imagine by the time they are supported widely, most of us will reach for them to create Carousel effects, rather than relying on JavaScript solutions from the likes of jQuery. However, until then, let's just open the lid and take a peek at what's possible.

Let's imagine we're making a simple...