应用转换后字体模糊

Question

我试图通过将 rotateY 应用于包含文本和图像的 div 来实现类似于 door/folder 打开的动画。应用时，文本元素变得模糊： blurry_chrome

应用于 div 的所有内容是：

.folder:hover {
  transform: translateZ(0) scale(1.12);
}

.folder:hover .front-cover {
  transform: perspective(1000px) rotateY(-20.44deg);
}

即使其中一个或另一个被剥离，问题仍然存在。仅应用 scale 或 rotateY 时文本仍然模糊。在 Firefox 上，这个问题似乎实际上要严重得多： blurry_firefox

我尝试了很多技巧，例如 translateZ(0)、blur(0) 和 font-smoothing，但没有任何改变。

如果我想要这种效果，没有办法解决这个问题吗？

编辑：有些'solutions'我已经试过了：

None 其中似乎有帮助。有什么想法吗？

Answer 1

有： -webkit-font-smoothing: subpixel-antialiased 这应该会给你最清晰的结果，但它不是标准化的。

在此处查看有关字体平滑的更多信息：

这个答案可能也有帮助：

Blurry text after using CSS transform: scale(); in Chrome

Answer 2

scale 是这里最大的罪魁祸首。放大超过 1 会导致模糊，因此我没有在悬停时放大，而是让元素在悬停时缩小并放大到 1。

此外，从转换中删除 perspective 产生清晰的文本和图像。

Blurry font after applying transform