我正在尝试在CSS中进行等距3D,这是我现在所拥有的:http: //jsfiddle.net/AagGZ/1/(仅用于测试的webkit)
我基本上使用盒子阴影,1px x 1xx来创建3D效果,这对我来说似乎非常讨厌.动画时,我正在尝试添加1px的新图层,因此动画失败(不是很好).
有没有更好的方法来实现它?我在CSS内容之前和之后想到了CSS Matrix并添加了div.
这应该是我的项目的一个很好的添加,而不是基本功能,所以我没关系它不能在IE9下工作.
谢谢你的帮助.
编辑:我重新打开了这个问题,因为你需要有一个纯色背景的事实是一个问题,在过滤器之前和之后创建大的"invisibile"白色箭头,并且当你在不同的背景上有不同的背景时,它会非常快部分网站或当您想要在另一个元素的悬停时更改背景.我现在要回到我的版本并禁用动画.欢迎任何想法!
我不确定我的版本是不是比你的版本少.不过,这是一个有趣的问题,我尝试了一下.
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 存在一个错误,无法在过滤器之前和之后进行动画处理。但计划在下一个里程碑进行修复,因此目前它的降级足够优雅。
| 归档时间: |
|
| 查看次数: |
2982 次 |
| 最近记录: |