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

【问题标题】：how to keep image quality when img element using transform in css?当img元素在css中使用transform时如何保持图像质量？
【发布时间】：2015-11-30 06:09:26
【问题描述】：

当我使用 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>

【问题讨论】：

这只是浏览器的抗锯齿。图像看起来质量很差。
更新了@Jared！我添加了高质量的图像。但没有改变。

标签： css image transform css-transforms

【解决方案1】：

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

【讨论】：

将-webkit-backface-visibility: hidden;添加到元素后，但没有改变更多不同。谢谢您的回答
你不会看到更多的变化，图像的锯齿状边界会变得平滑
真正工作的边界是平滑的。但不能保持图像质量:(
是的，它不会在图像上消除锯齿线。