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

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/

不要忘记需要的前缀