CSS3旋转动画会导致文本模糊

Question

我正在使用CSS3旋转将元素角度调整1度。

效果有效但不幸的是它导致里面的文字模糊和看起来很可怕。有没有办法停止模糊效果？

Live site - click "The Makers" in nav

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) ;

}

Answer 1

这种情况发生在Webkit浏览器中，例如Chrome和Safari。修复将是添加

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

CSS中的