CSS3:带阴影的立方体

Question

在这种情况下,我认为图像胜于雄辩.

我想得到这个效果:

但我能用CSS3做的最好的就是:

这个代码非常可怕:

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%),
            ...

有什么方法可以用纯CSS3创建这样的效果吗？我不介意它是3D,但等距是首选.

我不需要将内容放在盒子的两侧,只需放在正面,所以我只使用一个<div>元素.

这是我到目前为止所拥有的:http://jsfiddle.net/X7xSf/3/

任何帮助,将不胜感激!

Answer 1

我在一些CSS生成的元素上使用了一些偏斜变换......看看这个:

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

如果我想在生产中使用它,我可能会确定哪些浏览器支持前后,但不能转换(仅限IE8),然后使用2008年的Paul Irish的方法(http://paulirish.com/2008/conditional-stylesheets -vs-css-hacks-answer-both /)为IE8关闭此功能.