如何在CSS中做等距3D

rna*_*aud 5 3d css3 isometric

我正在尝试在CSS中进行等距3D,这是我现在所拥有的:http: //jsfiddle.net/AagGZ/1/(仅用于测试的webkit)

我基本上使用盒子阴影,1px x 1xx来创建3D效果,这对我来说似乎非常讨厌.动画时,我正在尝试添加1px的新图层,因此动画失败(不是很好).

有没有更好的方法来实现它?我在CSS内容之前和之后想到了CSS Matrix并添加了div.

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

谢谢你的帮助.

编辑:我重新打开了这个问题,因为你需要有一个纯色背景的事实是一个问题,在过滤器之前和之后创建大的"invisibile"白色箭头,并且当你在不同的背景上有不同的背景时,它会非常快部分网站或当您想要在另一个元素的悬停时更改背景.我现在要回到我的版本并禁用动画.欢迎任何想法!

met*_*ion 5

我不确定我的版本是不是比你的版本少.不过,这是一个有趣的问题,我尝试了一下.

http://jsfiddle.net/duopixel/5fdcj/

我的版本添加了简单的边框,并创建了倾斜的角落,我使用了边框形状http://www.howtocreate.co.uk/tutorials/css/slopes.如果您的背景不是纯色,这将不起作用.

在我看来,最干净的解决方案将涉及使用边界图像:http://www.css3.info/preview/border-image/.


rna*_*aud 2

好吧,这就是我所得到的,基于 Duopixel 对前后滤镜的使用,但边框实际上位于前后块上,这样我就不会遇到透明度问题。

: http: //jsfiddle.net/BXUdP/65/

为什么我喜欢它:透明度没有问题,在 IE8 中工作。该动画目前仅适用于 Firefox 4,Chrome 存在一个错误,无法在过滤器之前和之后进行动画处理。但计划在下一个里程碑进行修复,因此目前它的降级足够优雅。