3D變換CSS3導致文本和圖像模糊

Question

應用3D變換時文本和圖像模糊？

Answer 1

這是因爲您正在將它們縮放到沿z軸更靠近用戶。確保任何可讀性保持在z = 0，通過使用變換將整個立方體移回z通過立方體寬度的一半。

在你的情況，修改#cube規則：

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

這樣。爲了彌補，您需要將立方體變寬，並使文字大於11，以使其工作得很好。