变换模糊文字:在Chrome中旋转

Question

我正在构建一个带有旋转(transform:rotate(10deg))的包装器div的网站.div内的文本也会旋转.我希望文字笔直,所以我将它旋转回来(transform:rotate(-10deg)).文字再次笔直,但这会导致Chrome中的文字模糊(最新版本,mac).我试过了:

-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased; (and other)
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateZ(0deg);

它并没有解决问题..

JSFiddle:http://jsfiddle.net/D69d4/10/

奇怪的是:它在jsfiddle中完美运行..但不是在实际的网站上.当我-webkit-backface-visibility: hidden;在我的风格中添加时,Safari中的模糊文本再次变得清晰,但在Chrome中没有区别.(我几乎认为它在Chrome中让它变得更糟)(FF工作正常)

我希望有人可以帮助我,或者给我一个解释是什么问题.

Answer 1

它发生在Webkit浏览器中,例如Chrome和Safari.尝试添加:

-webkit-transform-origin: 50%  51%;

你会没事的

Answer 2

这对我有用。

zoom: 1.005;

希望这对你也有帮助。

这将使您的内容有点大，但模糊问题将得到解决。希望这对你有帮助。

Answer 3

尝试添加并检查是否可行（作为一种技巧）：

transform: translateZ(0);

Answer 4

对于尽管尝试了之前的建议但仍然遇到此问题的任何人：

我发现，如果您perspective在正在旋转的父元素上放置一个属性，则可以完全解决该问题。该值可以是上面的任何值0，假设您没有使用任何 3d 变换。

CSS 示例：

.parent {
    transform: rotate(10deg);
    perspective: 100px;
}

.child {
    transform: rotate(-10deg);
}