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

Alright, this is what I've got, based on Duopixel's use of before and after filters but with the borders actually living on the before and after blocks so that I don't have a problem with transparency.

: http://jsfiddle.net/BXUdP/65/

Why I like it : no problem with transparency, works in IE8. The animation only works in Firefox 4 for now though, there is a bug whith Chrome which cannot animates before and after filters. But a fix is planned for the next milestone, so it degrades gracefully enough for now.

Answer 2

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/.