如何在CSS中实现等轴测3D效果

Question

5

我正在尝试在CSS中制作等轴测3D图形，目前我的做法如下： http://jsfiddle.net/AagGZ/1/（仅用于测试webkit）。

我的主要方法是使用box-shadow，每个边框都是1像素宽以创建这种3D效果。但是我认为这种方法非常hacky。当进行动画时，我尝试添加新的1像素层，因此动画失败而不太好看。

有没有更好的方法实现这个效果？我想到了使用CSS矩阵以及before和after CSS内容，并添加divs。

这应该是我项目中很好的一个补充功能，不是基本功能，所以不支持IE9以下的浏览器也无妨。

感谢您的帮助。

编辑：我重新打开了这个问题，因为需要具有纯色背景可能会成为一个问题。before和after过滤器会创建大型“隐形”白色箭头，在网站的不同部分具有不同的背景或在悬停其他元素时更改背景时，这会快速变得非常痛苦。目前我正在返回到我的版本并禁用动画。欢迎任何想法！

- rnaud

2个回答

2

好的，根据Duopixel使用的before和after过滤器的方法，我做了一些修改，将边框实际上存在于before和after块中，这样就不会出现透明度问题。

我为什么喜欢它：没有透明度问题，在IE8中可以工作。目前只在Firefox 4中可以进行动画，但Chrome存在无法对before和after过滤器进行动画的bug。但是下一个里程碑计划修复这个问题，所以现在它可以优雅地降级。

- rnaud

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- methodofaction · Accepted Answer

我不确定我的版本是否比你的更简洁。不过，这是一个有趣的问题，我试着解决了一下。

我的版本添加了简单的边框，并使用了边框形状http://www.howtocreate.co.uk/tutorials/css/slopes来创建斜角。如果你的背景不是纯色，这种方法就不起作用。

在我看来，最干净的解决方案是使用边框图片：http://www.css3.info/preview/border-image/。