How to do isometric 3D in CSS

Question

I'm trying to do Isometric 3D in CSS, here is what I have right now : http://jsfiddle.net/AagGZ/1/ (webkit only for testing)

I'm basically using the box-shadow, 1px by 1px to create the 3D effect, this seems very hacky to me. When animating, I'm trying to add new layers of 1px, so the animation fails (not really nice).

Is there a better way to implement that ? I thought of CSS Matrix with before and after css content and added divs.

This is supposed to be a nice add to my project, not the basic function, so I'm okay with it not working below IE9.

Thanks for your help.

EDIT: I reopened the question because the fact that you need to have a solid color background is a bit a problem, before and after filter create big "invisibile" white arrows, and it becames a pain really fast when you have different backgrounds on different part of the sites or when you want to change the background on hover of another element. I'm going back to my version for now and disabling the animation. Any ideas are welcome !

Answer 1

I'm not sure my version is any less hacky than yours. Still, it's an interesting problem and I gave it a try.

http://jsfiddle.net/duopixel/5fdcj/

My version adds simple borders and to create the slanted corners I used border shapes http://www.howtocreate.co.uk/tutorials/css/slopes. This won't work if your background is not a solid color.

It seems to me the cleanest solution would involve using border images: http://www.css3.info/preview/border-image/.