how to keep image quality when img element using transform in css?

Question

When I rotate image with using CSS transform, image is going to low quality.can I keep image quality after image rotated only using CSS?

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

<div>
  <img src="https://i.sstatic.net/dAjV9.jpg" title="source: imgur.com" class="rotate"/>


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


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

Answer 1

This is an anti aliasing issue of the browser.You can add -webkit-backface-visibility: hidden; to the element being rotated which triggers antialiasing on the element.