如何在CSS中进行等轴测3D

如何在CSS中进行等轴测3D,3d,css,isometric,3d,Css,Isometric,我正在尝试在CSS中进行等轴测3D,以下是我现在所做的: (webkit仅用于测试) 我基本上是用盒子的阴影,1px乘以1px来创建3D效果,这对我来说似乎很粗糙。当设置动画时,我试图添加1px的新层,因此动画失败(不是很好) 有没有更好的方法来实现这一点?我想到了CSS矩阵的前后CSS内容和添加div 这应该是一个很好的添加到我的项目,而不是基本的功能,所以我同意它不在IE9下工作 谢谢你的帮助 编辑:我重新打开了这个问题,因为你需要一个纯色背景这一事实有点问题,在过滤器前后创建一个大的“不可

我正在尝试在CSS中进行等轴测3D,以下是我现在所做的: (webkit仅用于测试)

我基本上是用盒子的阴影,1px乘以1px来创建3D效果,这对我来说似乎很粗糙。当设置动画时,我试图添加1px的新层,因此动画失败(不是很好)

有没有更好的方法来实现这一点?我想到了CSS矩阵的前后CSS内容和添加div

这应该是一个很好的添加到我的项目,而不是基本的功能,所以我同意它不在IE9下工作

谢谢你的帮助

编辑:我重新打开了这个问题,因为你需要一个纯色背景这一事实有点问题,在过滤器前后创建一个大的“不可见”白色箭头,当你在网站的不同部分有不同的背景,或者当你想改变另一个元素悬停时的背景时,这会很快成为一种痛苦。 现在我将返回到我的版本并禁用动画。
欢迎任何意见

我不确定我的版本是否比你的版本更黑客。不过,这是一个有趣的问题,我试了一下

我的版本添加了简单的边框,为了创建斜角,我使用了边框形状。如果您的背景不是纯色,这将不起作用


在我看来,最干净的解决方案是使用边界图像:。

好吧,这是我得到的,基于Duopixel使用前后过滤器,但边界实际上位于前后块上,因此我没有透明度问题

:

我喜欢它的原因:透明度没有问题,在IE8中工作。
动画目前只能在Firefox4中使用,但是有一个带有Chrome的bug,它不能在过滤器前后设置动画。但是计划在下一个里程碑中进行修复,因此它现在已经足够优雅了。

如果我们尝试使用边界图像,我不确定我们是否可以制作动画,但您的解决方案已经比我的解决方案少了很多黑客性,动画可以工作,非常感谢!)