如何在 CSS 中制作等距 3D
我正在尝试在 CSS 中做等距 3D，这是我现在所拥有的： http://jsfiddle.net/AagGZ/1/ （webkit仅用于测试）
我基本上使用 box-shadow，1px x 1px 来创建 3D 效果，这对我来说似乎很老套。制作动画时，我尝试添加 1px 的新图层，因此动画失败（不太好）。
有更好的方法来实现吗？我想到了 CSS 矩阵，其中包含前后的 css 内容并添加了 div。
这应该是对我的项目的一个很好的补充，而不是基本功能，所以我可以接受它在 IE9 以下不工作。
感谢您的帮助。
编辑：我重新提出了这个问题，因为你需要有一个纯色背景的事实有点问题，在过滤器之前和之后创建大的“隐形”白色箭头，当你在不同的背景上有不同的背景时，它很快就会变得很痛苦网站的一部分或当您想要更改悬停在另一个元素上的背景时。 我现在要返回到我的版本并禁用动画。 欢迎任何想法！
I'm trying to do Isometric 3D in CSS, here is what I have right now :
http://jsfiddle.net/AagGZ/1/ (webkit only for testing)
I'm basically using the box-shadow, 1px by 1px to create the 3D effect, this seems very hacky to me. When animating, I'm trying to add new layers of 1px, so the animation fails (not really nice).
Is there a better way to implement that ? I thought of CSS Matrix with before and after css content and added divs.
This is supposed to be a nice add to my project, not the basic function, so I'm okay with it not working below IE9.
Thanks for your help.
EDIT: I reopened the question because the fact that you need to have a solid color background is a bit a problem, before and after filter create big "invisibile" white arrows, and it becames a pain really fast when you have different backgrounds on different part of the sites or when you want to change the background on hover of another element.
I'm going back to my version for now and disabling the animation.
Any ideas are welcome !
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我不确定我的版本是否比你的版本更简单。尽管如此，这仍然是一个有趣的问题，我尝试了一下。
http://jsfiddle.net/duopixel/5fdcj/
我的版本添加了简单的边框并创建倾斜我使用边框形状的角 http://www.howtocreate.co.uk/tutorials/css/斜坡。如果您的背景不是纯色，这将不起作用。
在我看来，最干净的解决方案涉及使用边框图像： http://www.css3.info /预览/边框图像/。
I'm not sure my version is any less hacky than yours. Still, it's an interesting problem and I gave it a try.
http://jsfiddle.net/duopixel/5fdcj/
My version adds simple borders and to create the slanted corners I used border shapes http://www.howtocreate.co.uk/tutorials/css/slopes. This won't work if your background is not a solid color.
It seems to me the cleanest solution would involve using border images: http://www.css3.info/preview/border-image/.
好吧，这就是我所得到的，基于 Duopixel 对前后滤镜的使用，但边框实际上位于前后块上，这样我就不会遇到透明度问题。
： http://jsfiddle.net/BXUdP/65/
为什么我喜欢它：透明度没问题，适用于 IE8。
该动画目前仅适用于 Firefox 4，Chrome 存在一个错误，无法在过滤器之前和之后进行动画处理。但计划在下一个里程碑进行修复，因此目前它的降级足够优雅。
Alright, this is what I've got, based on Duopixel's use of before and after filters but with the borders actually living on the before and after blocks so that I don't have a problem with transparency.
: http://jsfiddle.net/BXUdP/65/
Why I like it : no problem with transparency, works in IE8.
The animation only works in Firefox 4 for now though, there is a bug whith Chrome which cannot animates before and after filters. But a fix is planned for the next milestone, so it degrades gracefully enough for now.