CSS中transform后字体与图像模糊问题求助

问题现象 #

制作带perspective和rotateY的3D倾斜框架后，内部字体、图像出现模糊；Edge浏览器缩小页面后模糊消失，但rotateY角度异常变大。

核心解决办法 #

以下CSS属性组合可解决大部分3D变换导致的模糊问题：

• backface-visibility: hidden：强制浏览器启用硬件加速渲染，提升变换后的像素精度
• will-change: transform：提前告知浏览器优化该元素的变换渲染逻辑
• 调整perspective值：过小的透视值会加剧变形模糊，可适当增大（如2000px）
• 父元素添加transform-style: preserve-3d：保证3D空间渲染一致性，避免子元素渲染异常

修改后的CSS代码 #

/* 父容器需添加 */
.parent-container {
  transform-style: preserve-3d;
}

.testL{
  transform: perspective(2000px) rotateY(15deg);
  border-radius: 1rem;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  transition: transform 1s ease 0s;
  backface-visibility: hidden;
  will-change: transform;
}

.testR{
  transform: perspective(2000px) rotateY(-15deg);
  border-radius: 1rem;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  transition: transform 1s ease 0s;
  backface-visibility: hidden;
  will-change: transform;
}

Edge缩放角度异常处理 #

通过JS监听页面缩放，动态调整rotateY角度抵消缩放影响：

window.addEventListener('resize', () => {
  const scale = window.devicePixelRatio || 1;
  const targetAngle = 15 / scale;
  const testL = document.querySelector('.testL');
  const testR = document.querySelector('.testR');
  
  if (testL && testR) {
    testL.style.transform = `perspective(2000px) rotateY(${targetAngle}deg)`;
    testR.style.transform = `perspective(2000px) rotateY(${-targetAngle}deg)`;
  }
});

内容的提问来源于stack exchange，提问作者whereiam