3D变换CSS3导致文本和图像模糊

Question

应用3d变换时文本和图像会模糊吗？

Answer 1

那是因为你正在缩放它们以沿着z轴更靠近用户。确保任何可读的内容都保持在z = 0，方法是使用变换将整个多维数据集移回z的方块宽度的一半。

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

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

像那样。为了补偿，你需要使立方体更宽，并使文本大于11，以使其工作得很好。