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），然后使用Paul Irish的方法从2008年开始（http://paulirish.com/2008/条件样式表 - vs-css-hacks-answer-both /）为IE8关闭此功能。

Answer 2

嗯......我的想法是使用边框黑客和一些掩盖让它工作...... IE 8至少？ 但我无法弄清楚如何让边框向后动画修正了它。

你可以在这里看到我的想法：http://jsfiddle.net/k2AdU/1

并且代码概念是使用：before和：after为角落创建掩码

.cube
{
    width:100px;
    height:100px;
    background:#454545;
    position:relative;
    border-right:20px solid #333;
    border-bottom:20px solid #111;
    border-right-width:0px;
    border-bottom-width:0px;
    left:20px;
    top:20px;
}
.cube:after
{
    content:"";
    display:block;
    position:absolute;
    left:0px;
    top:100%;
    border:10px solid transparent;
    border-left:10px solid white;
    border-bottom:10px solid white;
}
.cube:before
{
    content:"";
    display:block;
    position:absolute;
    top:0px;
    left:100%;
    border:10px solid transparent;
    border-top:10px solid white;
    border-right:10px solid white;
}