Html CSS3：带阴影的立方体

我认为在这种情况下，图像比语言更能说明问题

我想得到这个效果：

但是我能用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的，但是等距的会更好

我不需要将内容放在盒子的侧面，只需要放在正面，所以我只使用一个

元素

以下是我目前掌握的信息：

---

任何帮助都将不胜感激

我会对一些CSS生成的元素使用一些倾斜变换。。。看看这个：

---

如果我想在生产中使用它，我可能会确定哪些浏览器支持前后转换，但不支持转换（仅IE8），然后使用Paul Irish从2008年开始的方法(http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/)要为IE8关闭此选项。

好吧。。。我的想法是使用边界黑客和一些掩蔽让它在。。。至少8岁？但我不知道如何让边界向后设置动画

你可以在这里看到我的想法：

代码的概念是使用：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;
}

---

看看这个：作者解释了如何创建多维数据集：我以前见过这种效果，但它需要3个

元素。我正在尝试创建一个跨浏览器解决方案，它只在IE等设备上显示一个平面正方形，在Webkit和Firefox中显示一个立方体。@Blender为什么不在FF、Webkit和IE中显示一个立方体（可能需要使用不止一个元素）我正在尝试皮条客我的图像库，每个图像都有这个立方体结构。当您将鼠标悬停在立方体上时，立方体从网格中出来并形成一个洞。我有大约50张图片，在低端（cough-IE-cough）浏览器上可能会很吃力。但是，如果我找不到CSS3单元素解决方案，我想我必须用3个元素来实现……有趣的是，Internet Explorer几乎只产生了这种效果，但是阴影消失了。我正在考虑使用

：before

和

：after

。这绝对是正确的选择，谢谢！如果你改变尺寸要小心，我必须手动计算出偏移量、宽度和高度；我认为以下几点应该足够优雅地处理事情。。？[更新了演示]。我将

底部

和

左侧

设置为

100%

以将其推到相关边缘，在“其他”边缘上指定

0

，使其达到全高/全宽，然后为

变换原点指定
左上
我不记得我做了什么，看着它…但它似乎工作得很愉快，没有重新定义宽度/高度/偏移=/你不知道我用这个有多有趣：我不会用jQuery制作动画。CSS3转换！没有想过使用边界。谢谢你的代码！