CSS变换比例使文本模糊

CSS变换比例使文本模糊,css,transform,css-transitions,Css,Transform,Css Transitions,我有一个悬停效果,当它被触发时,盒子会放大。我唯一的问题是,文本在转换过程中似乎模糊了,然后在“转换”时再次变得尖锐 在这里发布之前,我决定进行一项研究,发现这篇文章似乎也是我的问题: 我已经将他们的答案应用到我的构建中,但仍然会出现模糊效果。我在下面提供了一个链接,如果有人能给我提供建议,我有可能解决这个问题,那就太好了 例如,转换代码: -moz-transform:scale(1.05,1.05); 虽然它不是等效的,但在:hover中设置宽度、高度、左侧、顶部和字体大小属性时,Ch

我有一个悬停效果,当它被触发时,盒子会放大。我唯一的问题是,文本在转换过程中似乎模糊了,然后在“转换”时再次变得尖锐

在这里发布之前,我决定进行一项研究,发现这篇文章似乎也是我的问题:

我已经将他们的答案应用到我的构建中,但仍然会出现模糊效果。我在下面提供了一个链接,如果有人能给我提供建议,我有可能解决这个问题,那就太好了

例如,转换代码:

-moz-transform:scale(1.05,1.05);

虽然它不是等效的,但在:hover中设置宽度、高度、左侧、顶部和字体大小属性时,Chrome上不会出现模糊

.cta:hover {
    width: 500px;
    height: 500px;
    font-size: 400%;
}
“可能”的唯一其他解决方法是使用动画@关键帧,并将它们设置为5或10个,这可能会强制纠正每个关键帧之间的模糊现象。

我在以下网站上发现了这一点:

如果将变换设置为也使用,则会显示此对话框

translate3d( 0, 0, 0)
它可以修复这个问题,但它确实会导致旋转/变换时字体有点模糊。请看这里:

我使用Jquery,需要修复滑块的H3标记。较大的文本对我来说并不模糊。 我写了这句话

$(“#slider1_container”).find(“h3”).css(“-webkit transform”,“translate3d(0,0,0)”)).css(“-webkit text stroke”,“0.15px”)

这对我来说是最好的解决办法。我需要-webkit-在我的转换前面。我不知道为什么,正如其他人所说,不要使用它。我上传了一张图片,上面有一些不同的设置