CSS旋转变换使图像模糊

Posted 2023-03-14

【中文标题】CSS旋转变换使图像模糊

【英文标题】：CSS rotate transform makes image blurry

【发布时间】：2016-09-08 13:16:10

【问题描述】：

我使用 CSS 变换旋转和缩放创建了一个八边形剪裁样式，如下面的代码 sn-p。

但是，在 El Capitan 上查看 Chrome 52.0.2743.116（64 位）时，图像看起来很模糊。相反，图像在 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"   />
    </p>
  </div>
</div>

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

【问题讨论】：

你试过transform: perspective(1px) rotate(45deg);吗？ .... 或者在父级上设置transform-style: preserve-3d;？

我都试过了，还是没用。

请注意，如果您拍摄 300x300 的照片并将其放大到 500x500，无论有没有transform，它都会变得模糊。而是使用更大的原件并将其缩小，您就不会遇到这个问题

【参考方案1】：

我刚刚在我的 comp 上测试了这个，当我应用像素化图像渲染而不是 -webkit-optimize-contrast 时，它看起来更好。

div.octagon > * > img 
  image-rendering: pixelated;