Javascript 使用translateZ缩放时如何消除模糊文本

在使用translateZ处理3d变换时，div元素中的文本会变得模糊，我对此有一个问题。转换是在javascript中完成的

我所尝试的：

div.blurryTextDiv {
  -webkit-font-smoothing: subpixel-antialiased;
}

及

div.blurryTextDiv {
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

但这些方法都不起作用

这就是转换的实际情况：

function onParentClick () {

    document.getElementById("parentOfDiv").style.transform = "translateZ(500px)";

}

这就是我的html的结构：

<figure id="parentOfDiv" onclick="onParentClick()">
  <div id="moreContent" class="blurryTextDiv">why is this text so blurry</div>
</figure>

为什么这篇文章这么模糊

我不知道这是否重要，但是带有模糊文本的div元素实际上没有被转换，但是div的父元素正在被转换和放大，从而导致div与其一起缩放，从而导致模糊文本

有没有办法减轻我的div模糊的文本

---

请帮忙！如有任何建议，将不胜感激

你能分享实际转换的代码和html吗？不确定这是否有帮助，但当我进行

transformscale

带有小数点的操作时，情况也一样。。。因此，我不得不编写一个额外的js代码来对这些数字进行四舍五入，并在

转换中重新应用一个整数。。。我还想知道是否有更好的解决方案，但这可能是您的一项工作。我已编辑了我的问题，以提供有关转换和结构库的更多信息，以供您了解David！我不确定这里的情况是否如此，因为我的变换中没有小数，我也没有对我的任何元素应用比例变换。