Realistic Reflections On Animated 3D Glossy Elements

This is a demonstration on how to achieve glossy reflections on animated 3D elements using just CSS3 (Please note that this demonstration will only work in webkit browsers for now as perspective property is not supported in browsers other than chrome/safari yet).

For those who don't have a webkit browser or can't see the effect for some reason, here's a video I recorded so that you guys can take a look ;)

So basically, there's a div with the class .box and it contains another div with the class .reflection. The names are pretty self explanatory so I would not go in detail here.

How it works?

The trick here is the movement of reflection is done with respect to it's parent element i.e. div.box. Here, when the div.box rotates 60 degree (in 3D space), the div.reflection is translated to 50% in the same direction. This makes the sense of moving reflection and makes it look very realstic.

You can try your own combinations of rotations/movements of the box and make the reflection to work on them too! Feel free to play with the code here and post your combinations through the comments. I'll check them all :)

I got the idea of this effect from a post by Ryan Collins on his blog.