应用变换后的模糊字体

编程问答 2022-05-14

问题描述

我试图通过将 rotateY 应用于包含文本和图像的 div 来实现类似于门/文件夹打开的动画。应用后，文本元素变得模糊： 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，但没有任何改变。

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

代码笔：https://codepen.io/mello-code/pen/XWpzxWd

编辑： 我已经尝试过的一些“解决方案”：

  • -webkit-font-smoothing：子像素抗锯齿；
  • 过滤器：blur(0);
  • 转换起源：51% 51%；
  • 使 div 大小、元素、内边距和边距均匀
  • 背面可见性：隐藏；
  • perspective(1px)（悬停时已经应用了透视）
  • 缩放而不是缩放

他们似乎都没有帮助。有什么想法吗？

解决方法

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

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

,

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

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

https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth

这个答案可能也有帮助：

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

blurrychromiumchromiumhtmltransformtransform