CSS3: Cube with shadow

Question

I think images speak louder than words in this case.

I want to get this effect:

But the best I can do with CSS3 is this:

And the code for this is absolutely terrible:

box-shadow: 1px 1px hsl(0, 0%, 27%),
            2px 2px hsl(0, 0%, 27%),
            3px 3px hsl(0, 0%, 27%),
            4px 4px hsl(0, 0%, 27%),
            5px 5px hsl(0, 0%, 27%),
            6px 6px hsl(0, 0%, 27%),
            7px 7px hsl(0, 0%, 27%),
            8px 8px hsl(0, 0%, 27%),
            ...

Is there any way that I can create an effect like this with pure CSS3? I don't mind having it be 3D, but isometric would be preferred.

I don't need to place content onto the sides of the box, just onto the front face, so I'm working with just a single <div> element.

Here's what I have so far: http://jsfiddle.net/X7xSf/3/

Any help would be appreciated!

Answer 1

I'd use some skew transforms on some CSS generated elements... Take a look at this:

http://jsfiddle.net/X7xSf/12/

If I wanted to use this in production, I'd probably identify which browsers support before and after, but not transforms (only IE8), then use Paul Irish's method from 2008 (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) to turn this off for IE8.