I’m letting out my inner zombie, and I think you should, too! This brilliant little demo by Steve Wittens uses a pair of large sprite sheets (one for colour, one for opacity) which contain the cross sections of a human head taken by an MRI scanner.
Each slice is drawn into its own canvas using the colour and opacity information from the sprite sheets. CSS 3D is used to position all the slices and line them up next to each other in 3D space, effectively reconstituting the head. JavaScript is then used to update the location and rotation of the slices, as well as switch them on and off.
CSS 3D is something of an unsung hero, I feel. Despite having been implemented in Chrome, Safari, Firefox (and the incoming Internet Explorer 10) as well as iOS and Android devices there are surprisingly few demos out there showcasing its abilities.
When combined with JavaScript it can be an extremely simple yet powerful renderer. In fact Steve is in the middle of attempting to create a CSS 3D renderer for Three.js which is definitely one to follow!
So take a look at the demo, it’s a fascinating (if slightly gross) indicator of what you can get up to with a little CSS 3D and some JavaScript!
All together now: “Brrrraaaaaains!”