logo标签列表

CSS 旋转变换会导致图像模糊

csscss-transforms
3
我用CSS transform rotate以及scale创建了一个八边形的样式，如下所示：
然而，在Mac系统上使用Chrome 52.0.2743.116 (64-bit)浏览器时，这张图片会变得模糊。相反，在Firefox上这张图片看起来很清晰。
我已经尝试了各种解决方案，例如backface-visibility: hidden; transform: translateZ(0); filter: blur(0); image-rendering: -webkit-optimize-contrast;，但是图片仍然模糊不清。
是否有任何Webkit特定规则可以解决这个问题？ 

div.octagon {
  display: inline-block;
  position: relative;
  overflow: hidden;
  -webkit-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
  -moz-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
  -ms-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
  -o-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
  transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
  margin-top: 1em;
  margin-bottom: 1em;
}
div.octagon > * {
  position: relative;
  overflow: hidden;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background: transparent;
  border: 4px solid;
  margin: 0;
  background-color: black;
}
div.octagon > *:after {
  position: absolute;
  /* There needs to be a negative value here to cancel
       * out the width of the border. It's currently -3px,
       * but if the border were 5px, then it'd be -5px.
       */
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  content: '';
  border: inherit;
}
div.octagon > * > img {
  display: block;
  -webkit-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
  -moz-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
  -ms-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
  -o-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
  transform: rotate(-67.5deg) scale(1.1) translateZ(0);
  max-width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}
.col-6 {
  display: inline-block;
  width: 49%;
}
.col-6 > .octagon {
  width: 100%;
}
<div class="col-6">
  <div class="octagon">
    <p>
      <img src="https://placeimg.com/300/300/people" width="500" height="500" />
    </p>
  </div>
</div>

<div class="col-6">
  <img src="https://placeimg.com/300/300/people" width="300" height="300" />
</div>

你尝试过使用 transform: perspective(1px) rotate(45deg); 吗？或者在父元素上设置 transform-style: preserve-3d; 呢？ - Asons
我尝试了两种方法，但都没有帮助。 - Sơn Trần-Nguyễn
请注意，如果您拍摄了一个尺寸为300x300的图片并将其放大到500x500，即使使用transform也会变得模糊。相反，请使用更大的原始图像并缩小它，就不会出现这个问题。 - Asons
1个回答
3

我刚在我的电脑上测试了一下，当我应用像素化的图像渲染而不是-webkit-optimize-contrast时，效果更好。

div.octagon > * > img {
  image-rendering: pixelated;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接