CSS变形-为什么简单的旋转会使图像模糊? [英] CSS Transforms - Why does a simple rotation make the image blurry?

问题描述

为什么简单旋转会导致图像模糊?

Why does a simple rotate make an image blurry?

希望将图像旋转90度，但是生成的图像模糊不清.

Looking to rotate an image 90deg, but the resulting image is unacceptably blurry.

transform: rotate(90deg);

在Firefox和Chrome中都是相同的(未检查其他浏览器).

This is the same in both Firefox and Chrome (haven't checked other browsers).

这是一个JSFiddle链接:

Here is a JSFiddle link:

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

是否有任何变通办法/技巧可以将模糊降到最低?

Are there any workarounds/tricks to minimize the blurring?

-

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

In case it's computer specific, an image link 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/

不要忘记所需的前缀

这篇关于CSS变形-为什么简单的旋转会使图像模糊?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！