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

问题

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

回答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

回答2:

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.

回答3:

Adding a scale transform,

scale(0.99)

seems to help

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

回答4:

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);
}

来源：https://stackoverflow.com/questions/23871507/css-transforms-why-does-a-simple-rotation-make-the-image-blurry

标签

css

image

css-transforms