Pure CSS new 3D effect

The other examples on his blog are even cooler... check this out. <a href="http://www.romancortes.com/blog/css-3d-meninas/" rel="nofollow">http://www.romancortes.com/blog/css-3d-meninas/</a>

Nice effect.<p>I think a bit of JS is being used to create the DIV structure, but that's not important.<p>It could also be improved a bit: you could remove the shading gradient from the Coke can mask PNG, and render the shading using an CSS gradient with RGBA values. That would mimic the specular highlighting, and you could also animate the shading.<p>I still haven't quite grok'd the displacement method though... it must be carefully calculated background x pos offsets? (I don't have firebug on this machine)

Awesome hack. I don't really have any application for this, though.

<a href="http://m00d.net/mirror/coke/" rel="nofollow">http://m00d.net/mirror/coke/</a> &#60;- mirrored.

This experiment is definitely worthy of a post. I haven't looked at how he did that or the "CSS Bird" shadow effect but I'm impressed that can be done without Javascript.

Very cool. My question is.. how did he scan the coke-can? <a href="http://www.romancortes.com/ficheros/coke-label.jpg" rel="nofollow">http://www.romancortes.com/ficheros/coke-label.jpg</a>

This is slick. I wonder how long it took to build that image/

PROTIP: Try hiding the the width and the float on p and/or the padding and width on the 'div div' with firebug.

That looks great. No trying to be a dick, but what's the point?

wow!

Seems cpu intensive :) Server down.

Wow amazing. Now I feel like a total CSS noob.