对转换的模糊文字：在Chrome中旋转 [英] Blurry text on transform:rotate in Chrome

问题描述

我正在构建一个带有旋转（ transform：rotate（10deg）的封装器div的网站。 div内的文本也旋转。我想让文本直线，所以我旋转它（ transform：rotate（-10deg））。文字仍然正常，但这会导致Chrome（最新版本，mac）中的文字模糊。我试过：

I'm building a website with a wrapper div that is rotated (transform:rotate(10deg)). The text inside the div also rotates. I want the text straight, so I rotate it back (transform:rotate(-10deg)). The text is straight again, but this causes blurry text in Chrome (latest version, mac). I tried:

-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: http://jsfiddle.net/D69d4/10/

奇怪的是：它完美地在jsfiddle中工作。但不是在实际的网站上。
当我在样式中添加 -webkit-backface-visibility：hidden; 时，Safari中的模糊文本再次变得清晰，但在Chrome中没有差别。 （我几乎认为它在Chrome中更糟）（FF工作正常）

The weird thing is: it works perfectly in the jsfiddle.. But not on the actual website. When I add -webkit-backface-visibility: hidden; inside my style, the blurry text in Safari turns out sharp again, but in Chrome there is no difference. (I almost think it is making it worse in Chrome) (FF works fine)

我希望有人可以帮助我，或给我一个解释错误。

I hope someone can help me with this, or give me a explanation what is going wrong.

推荐答案

它发生在Webkit浏览器，如Chrome和Safari。尝试添加：

It happens in Webkit browsers such as Chrome and Safari. Try adding:

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

你会很好。

这篇关于对转换的模糊文字：在Chrome中旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！