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

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/

不要忘记所需的前缀