如何在CSS中使用变换img元素时保持图像质量？

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;添加到正在旋转的元素上，从而触发元素上的抗锯齿。