html - CSS-调整大小时图像/文字模糊

我在我的网站上做了一个悬停效果，你在那里悬停图片（PNG），它们会变大。我遇到的问题是，当调整大小时，它们现在变得模糊。
我正在使用的代码如下所示：

.div {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: perspective(1000px) translate3d(0,0,1px);
transform: perspective(1000px) translate3d(0,0,0);
}

.div:hover {
-webkit-transform: perspective(100px) translate3d(0,0,1px);
transform: perspective(100px) translate3d(0,0,31px);

}

你可以看到这个jsfiddle的效果：enter link description here
有办法解决这个问题吗？

最佳答案

我觉得这个比例比较合适。此解决方案仅在缩放期间模糊。

.square {
  width:100px;
  height: 100px;
  background-color:black;
  margin: 50px;
}
p {
  color:white;
  text-align: center;
  padding-top: 35px;
}
.square {
  -webkit-transition: -moz-transform .3s ease-out;
  -moz-transition: -webkit-transform .3s ease-out;
  -o-transition: -o-transform .3s ease-out;
  transition: transform .3s ease-out;
}
.square:hover {
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}

<div class="square">
  <p>Some text</p>
</div>

关于html - CSS-调整大小时图像/文字模糊，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31031995/