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

Question

Why does a simple rotate make an image blurry?

Looking to rotate an image 90deg, but the resulting image is unacceptably blurry.

transform: rotate(90deg);

This is the same in both Firefox and Chrome (haven't checked other browsers).

Here is a JSFiddle link:

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

Are there any workarounds/tricks to minimize the blurring?

--

In case it's computer specific, an image link http://i.imgur.com/WzXkRL9.png

Answer 1

You could use the following :

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

An example: http://jsfiddle.net/6d2GT/2/

don't forget the needed prefixes