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

css, css-transforms, image

Solution

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

Problem

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 https://i.stack.imgur.com/EidRE.png

Original source