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

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

想要旋转图像90度,但生成的图像模糊不清.

transform: rotate(90deg);

这在Firefox和Chrome中都是一样的(没有检查过其他浏览器).

这是一个JSfiddle链接：

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

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

–

如果是计算机专用的,则为图像链接http://i.imgur.com/WzXkRL9.png

解决方法

您可以使用以下内容：

#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/

不要忘记所需的前缀