CSS Transforms - Why does a simple rotation make the image blurry?

Question

Why does a simple rotation make the image blurry?

Looking at a 90deg image rotation, but the resulting image is unacceptably blurry.

transform: rotate(90deg); 

This is the same in both Firefox and Chrome (not tested by other browsers).

Here is the JSFiddle link:

http://jsfiddle.net/6d2GT/1/

Are there any workarounds / tricks to minimize blurring?

-

If it is a specific computer, the image link is http://i.imgur.com/WzXkRL9.png

Answer 1

You can use the following:

 #pic { -webkit-transform: rotate(90deg) translatez(0); transform: rotate(90deg) translatez(0); margin-top: 50px; -webkit-transform-origin: 50% 51%; } 

Example: http://jsfiddle.net/6d2GT/2/

do not forget about the necessary prefixes

Answer 2

Adding a scale transformation

 scale(0.99) 

seems to help

http://jsfiddle.net/jetRed/6d2GT/3/

Answer 3

You must put the image in another tag and rotate the parent tag. Therefore, the image does not look blurry.

HTML

 <div class = "rotate_parent"> <img ...> </div> 

CSS

 .rotate_parent{ transform: rotate(90deg); } 

Answer 4

The answer is simple!!! You must make sure that the width and height of the images are even numbers. You do not need to worry about adding rotation to the parent, you can apply it directly to the image.

I had a problem just now, and the first thing I thought about was that it looked like a perfect 180 rotation, that when I rotated 90 it did not align correctly due to an odd number of pixels. Therefore, he tries to center, which in turn causes a blur effect.