CSS Transforms - Why does a simple rotation make t

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

Adding a scale transform,

scale(0.99)

seems to help

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

Answer 2

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

Answer 3

You must put the image inside another tag and rotate the parent tag. This way the image doesn't appear blur.

HTML

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

CSS

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

Answer 4

The answer is simple!!! You need to make sure your images width and height are even numbers. You don't need to worry about adding the rotation to the parent, you can apply it directly to the image.

I had the problem just now and the first thing I thought of as it seemed to be fine rotating 180 was that as it rotates 90 it's not aligning correctly due to the odd number of pixels. So it tries to center which in turn causes a blur effect.