css - Chrome/Firefox 28+ 中的图像模糊

Question

我正在制作一个包含大量 css 转换 (rotate:45deg) 的网站，但我对模糊 文本/图像几乎没有问题。

我用一个例子做了一个 jsfiddle。<强> http://jsfiddle.net/4pjsh/

在 Chrome 中，我添加了“硬件加速”来修复动画期间的闪烁/糟糕效果，但图像和文本现在总是模糊不清。我搜索并尝试了很多东西，但找不到让它们干净的方法。

在 Firefox 27- 中，它工作正常，但自从 mozilla 发布 firefox 28/29 以来，当 block 动画时，图像模糊。在动画结束时，他们干净地回来了。

有人知道怎么解决吗？如果可能的话……

谢谢

Answer 1

我删除了所有旋转，然后“重新开始”。至少我以某种方式摆脱了 chrome 中的模糊。

http://jsfiddle.net/4pjsh/6/

所以现在，我只是像这样旋转:

.gridd .item {
    -webkit-transform: rotate(45deg);
}
.gridd .zonelogo img {
    -webkit-transform: rotate(-45deg);
}
.gridd .item .blockMore p { //You don't need to be this specific
    -webkit-transform: rotate(-45deg)
}

抱歉，只有时间做 -webkit :)