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

Question

应用3D变换时文本和图像模糊？

Answer 1

这是因为您正在将它们缩放到沿z轴更靠近用户。确保任何可读性保持在z = 0，通过使用变换将整个立方体移回z通过立方体宽度的一半。

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

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

这样。为了弥补，您需要将立方体变宽，并使文字大于11，以使其工作得很好。