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

Question

为什么简单的旋转会导致图像变得模糊？

想要将图像旋转90度，但是旋转后的图像模糊得无法接受。

transform: rotate(90deg);

这在Firefox和Chrome中都是一样的（没有检查其他浏览器）。

这里是一个JSFiddle链接：

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

有什么解决方法/技巧可以最小化模糊吗？

--

如果它与计算机有关，请参考此图片链接 http://i.imgur.com/WzXkRL9.png

- Jet Blue

---

我猜测光栅化过程/抗锯齿是导致这种情况的原因。 - Logan

对于Chrome浏览器，请尝试添加以下内容：-webkit-backface-visibility: hidden; - web-tiki

@web-tiki，图像一旦旋转就不再清晰。 - Jet Blue

尝试使用SVG替代。这是如何实现的：http://codepen.io/Izaias/pen/WvWxxv。 - Izaias

当旋转角度不是90度的倍数时，模糊尤为明显。 - SpyderScript

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/ 不要忘记所需的前缀。

- Vangel Tzo

Answer 2

答案很简单！！！ 你需要确保图像的宽度和高度是偶数。 您无需担心将旋转添加到父级，可以直接应用于图像。

我刚遇到这个问题，最初认为旋转180度似乎没问题，但由于像素数为奇数，所以在旋转90度时无法正确对齐。 因此，它试图居中，从而导致模糊效果。

- Pocketninja

Answer 3

添加一个比例变换，

scale(0.99)

似乎有所帮助

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

- Jet Blue

---

可以考虑使用一张更大的图片进行旋转，并将其缩小... - Jet Blue

Answer 4

你必须将图像放在另一个标签内，并旋转父标签。这样图像就不会出现模糊。

HTML

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

CSS

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

- sagar_jeevan