html - 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/conditional-stylesheets -vs-css-hacks-answer-neither/) 为 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;
}