css – 转换模糊文本:在Chrome中旋转

前端之家收集整理的这篇文章主要介绍了css – 转换模糊文本:在Chrome中旋转前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在构建一个带有旋转的包装div的网站(transform:rotate(10deg)). div内的文字也会旋转.我希望文本笔直,所以我将其旋转回来(transform:rotate(-10deg)).文字再次笔直,但这会导致Chrome中的文字模糊(最新版本,mac).我试过了:
-webkit-transform: rotate(.7deg) translate3d( 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工作正常)

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

解决方法

它发生在Webkit浏览器中,例如Chrome和Safari.尝试添加
-webkit-transform-origin: 50%  51%;

你会没事的

猜你在找的CSS相关文章