CSS3的3D转换会导致文本和图片变得模糊。

Question

3

当应用3D变换时，文本和图像会变得模糊吗？

- Wlada

我看到一些抗锯齿效果，但没有模糊。如果 3D 上下文的像素没有与监视器完全对齐，或者渲染（抗）锯齿或插值了一点，那也不足为奇。 - ssube

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rich Bradshaw · Accepted Answer

这是因为你正在沿着z轴将它们缩放以使其更接近用户。通过使用变换将整个立方体沿着z轴后移半个立方体宽度，确保任何可读内容保持在z = 0处。

在您的情况下，修改您的#cube规则：

#wrapper.red #cube {
    -webkit-transform: translateZ(-210px) rotateY(90deg);
}

就像这样。为了补偿，您需要使立方体更宽，并将文本大小调整为大于11号字体以使其正常工作。