我正在尝试在 CSS 中做 Isometric 3D，这就是我现在所拥有的：http: //jsfiddle.net/AagGZ/1/（webkit 仅用于测试）
我基本上使用 box-shadow，1px x 1px 来创建 3D 效果，这对我来说似乎很 hacky。动画时，我试图添加 1px 的新层，所以动画失败（不是很好）。
有没有更好的方法来实现它？我想到了 CSS Matrix 前后的 CSS 内容并添加了 div。
这应该是对我的项目的一个很好的补充，而不是基本功能，所以我可以接受它在 IE9 下无法工作。
谢谢你的帮助。
编辑：我重新打开了这个问题，因为你需要有一个纯色背景这个事实有点问题，在过滤器之前和之后创建大的“不可见”白色箭头，当你在不同的地方有不同的背景时，它变得非常痛苦网站的一部分或当您想更改悬停在另一个元素上的背景时。我现在要回到我的版本并禁用动画。欢迎任何想法！
我不确定我的版本是否比你的版本少。不过，这是一个有趣的问题，我试了一下。
http://jsfiddle.net/duopixel/5fdcj/
我的版本添加了简单的边框并创建了斜角，我使用了边框形状http://www.howtocreate.co.uk/tutorials/css/slopes。如果您的背景不是纯色，这将不起作用。
在我看来，最干净的解决方案将涉及使用边框图像：http ://www.css3.info/preview/border-image/ 。
好吧，这就是我所拥有的，基于 Duopixel 对前后滤镜的使用，但边框实际上位于前后块上，这样我就不会遇到透明度问题。
：http: //jsfiddle.net/BXUdP/65/
为什么我喜欢它：透明度没问题，在 IE8 中工作。该动画目前仅适用于 Firefox 4，但 Chrome 存在一个错误，无法在过滤器之前和之后进行动画处理。但是计划为下一个里程碑进行修复，因此它现在可以优雅地降级。