css - 转换时文本模糊 :rotate in Chrome

Question

我正在构建一个带有旋转包装器 div 的网站 (transform:rotate(10deg))。 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

它发生在 Chrome 和 Safari 等 Webkit 浏览器中。尝试添加:

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

你会没事的。