問題描述
我正在構(gòu)建一個帶有旋轉(zhuǎn)的包裝 div (transform:rotate(10deg)) 的網(wǎng)站.div 內(nèi)的文本也會旋轉(zhuǎn).我希望文本是直的，所以我將它旋轉(zhuǎn)回來(transform:rotate(-10deg)).文本又是直的，但這會導(dǎo)致 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 中完美運行.但在實際網(wǎng)站上卻不行.當(dāng)我在我的樣式中添加 -webkit-backface-visibility: hidden; 時，Safari 中的模糊文本再次變得清晰，但在 Chrome 中沒有區(qū)別.(我?guī)缀跽J(rèn)為它在 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.
推薦答案
它發(fā)生在 Chrome 和 Safari 等 Webkit 瀏覽器中.嘗試添加:
It happens in Webkit browsers such as Chrome and Safari. Try adding:
-webkit-transform-origin: 50% 51%;
你會沒事的.
這篇關(guān)于變換模糊文本:在 Chrome 中旋轉(zhuǎn)的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！