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/。感谢任何帮助！

- Blender

---

请看这个：作者解释如何创建一个立方体：http://www.paulrhayes.com/experiments/cube/index.html - Ayush

我以前见过那种效果，但需要3个<div>元素。我正在尝试创建一个跨浏览器的解决方案，在IE和类似浏览器中只显示一个平面正方形，在Webkit和Firefox中显示一个立方体。 - Blender

@Blender 为什么不在 FF、Webkit 和 IE 中都用一个立方体呢？;) （可能需要使用多个元素） - Joseph Marikle

我正在尝试升级我的图库，其中每个图像都有这个立方体结构。当你悬停在它上面时，立方体会从网格中弹出并留下一个洞。我大约有50张图片，这可能会对低端（咳嗽 IE 咳嗽）浏览器造成负担。但如果我找不到CSS3单元素解决方案，我想我就必须用3个元素来实现... - Blender

有趣的是，仅限于Internet Explorer的“Shadow”滤镜（http://msdn.microsoft.com/en-us/library/ms533086(v=vs.85).aspx）几乎产生了这种效果，但阴影会逐渐消失。 - Paul D. Waite

@PaulD.Waite：这真是相当具有讽刺意味。 - Blender

Answer 1

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

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

如果我想在生产中使用它，我可能会先确定哪些浏览器支持 before 和 after ，但不支持变换(只有IE8)，然后使用Paul Irish在2008年提出的方法( http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ )来关闭IE8。

- Rich Bradshaw

---

你不需要手动调整任何东西，我认为以下更新的演示应该足够优雅地处理事情了..？[已更新演示]。 - David Thomas

酷！那你是怎么做的，只是在相关的地方没有指定高度/宽度吗？我没想到那样也能行。干得好！ - Rich Bradshaw

我将 bottom 和 left 设置为 100%，以将其推到相关边缘，指定了 '其他' 边缘上的 0 以使其具有完整高度/宽度，然后为 transform-origin 指定了 top left。看着它...我不记得我是否还做了其他什么，但似乎在不重新声明宽度/高度/偏移量的情况下正常工作 =/ - David Thomas

太棒了 - 之前如果能想到这个方法就不用试错了！ - Rich Bradshaw

你不知道我用这个有多开心：http://jsfiddle.net/X7xSf/29/ - Blender

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;
}

- Joseph Marikle

---

我不会使用jQuery来制作动画。CSS3变形！没想到可以使用边框。感谢您的代码！ - Blender