CSS3旋轉動畫導致模糊文本

效果起作用，但不幸的是，它導致文本內部模糊和可怕的樣子。有沒有辦法阻止模糊效果？

ul.polaroidGrid li:nth-child(even){ 
    transform: rotate(-1deg) ; 
-webkit-transform: rotate(-1deg) ; 
-moz-transform: rotate(-1deg) ; 
-o-transform: rotate(-1deg) ; 
-ms-transform: rotate(-1deg) ; 
} 

ul.polaroidGrid li:nth-child(odd) { 
    transform: rotate(1deg) ; 
    -webkit-transform: rotate(1deg) ; 
    -moz-transform: rotate(1deg) ; 
    -o-transform: rotate(1deg) ; 
    -ms-transform: rotate(1deg) ; 

}

enter image description here

來源

2013-11-03 Francesca

[靠不住的文字抗鋸齒時在Chrome與旋轉WebKit的變換（的可能重複http://stackoverflow.com/questions/6846953/wonky -text-anti-aliasing-when-rotation-with-webkit-transform-in-chrome） – 2013-11-03 23:14:43

說實話，我認爲它看起來非常好，考慮到字體總是爲0deg顯示而設計的。 –

這發生在WebKit瀏覽器，如Chrome和Safari。此修復程序會增加

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

在CSS

來源

2014-03-19 07:07:31 user2648599

在我的情況下，只有頁面滾動時纔會發生模糊的文本（如果內容適合頁面沒有問題）。對於修復它使用'-webkit-transform-origin：50％52％;' LE：您可能需要使用原始值進行一些修改，直到找到修復問題的值。 – darkyndy

CSS3旋轉動畫導致模糊文本

回答

相關問題