css - img 元素在 css 中使用 transform 时如何保持图像质量？

Question

当我使用 CSS 变换旋转图像时，图像质量会变差。仅使用 CSS 旋转图像后我能否保持图像质量？

.rotate {
       margin-right: 100px;
  -webkit-transform: translate(2px, 1px) rotate(5deg);
          transform: translate(2px, 1px) rotate(5deg);
}

<div>
  <img src="http://i.stack.imgur.com/dAjV9.jpg" title="source: imgur.com" class="rotate"/>


  <img src="http://i.stack.imgur.com/dAjV9.jpg" title="source: imgur.com" />
</div>
</br></br>
<div>
    <img src="http://i.stack.imgur.com/e3NdJ.jpg" title="source: imgur.com" class="rotate" width="150px" height="150px"/>


  <img src="http://i.stack.imgur.com/e3NdJ.jpg" title="source: imgur.com" width="150px" height="150px"/>
</div>

Answer 1

这是浏览器的抗锯齿问题。您可以将 -webkit-backface-visibility: hidden; 添加到正在旋转的元素上，这会触发元素上的抗锯齿.