If you happen to be reading this post in a resizable window, please do so and play around 1100px wide. You will see how css sprites combined with media queries can play an animation of the header's desk. If you're on a mobile, follow along with your imagination, and come back here when you're on a desktop/laptop for a better demo.
The background image of the h1 a is a sprite where each instance of the desk rotates 10deg clockwise, in perspective. I modeled the desk using the beta version of Rhino3D for mac (which I'm really excited about, by the way), cleaned an .ai wireframe export of each 10deg step in Illustrator, and finally punched the wood texture using the vector paths in Photoshop. No CSS involved in the 3D aspect of this. I could have used image masks to skip the Photoshop step, but I still like it in Photoshop. Anyway. CSS media queries call the appropriate desk's instance of the sprite by repositioning it every 5 pixels intervals of the window's width.
@media only screen and (min-width: 1100px) and (max-width: 1105px) and (min-device-width: 1025px) {
h1 a { background: url(../img/bureaux.png) no-repeat center 0; }
}
@media only screen and (min-width: 1106px) and (max-width: 1111px) and (min-device-width: 1025px) {
h1 a { background: url(../img/bureaux.png) no-repeat center -125px; }
}
It's been a long time since I wanted to do this, and I'm really happy to show it now. It's a very stupid thing of course; no one will benefit from this but RWD nuts like you, I'm afraid.