css - CSS3旋转动画导致文本模糊

Question

我正在使用 CSS3 旋转将元素倾斜 1 度。

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

现场直播 - 点击导航中的“The Makers”

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

这发生在 Chrome 和 Safari 等 Webkit 浏览器中。解决方法是添加

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

在 CSS 中