Question

为什么简单的旋转会使图像模糊不清？

想要将图像旋转90度，但生成的图像模糊不清。

transform: rotate(90deg);

Firefox和Chrome中的情况相同（尚未检查其他浏览器）。

这是一个JSFiddle链接：

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

是否有任何变通办法/技巧可以最大限度地减少模糊？

-

如果是特定于计算机的，则为图像链接http://i.imgur.com/WzXkRL9.png

Answer 1

您可以使用以下内容：

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

示例：http://jsfiddle.net/6d2GT/2/

不要忘记所需的前缀

Answer 2

答案很简单!!!您需要确保图像的宽度和高度均为偶数。您不必担心将旋转添加到父级，您可以将其直接应用于图像。

我刚才遇到了问题，我想到的第一件事就是旋转180似乎很好，因为它旋转了90，由于奇数个像素，它没有正确对齐。因此它会尝试居中，从而导致模糊效果。

Answer 3

添加比例变换，

scale(0.99)

似乎有帮助

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

Answer 4

您必须将图像放在另一个标记内并旋转父标记。这样图像就不会显得模糊。

<强> HTML

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

<强> CSS

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

CSS变换 - 为什么简单的旋转会使图像模糊？

4 个答案: