css: transform導致文字顯示模糊

有人認為模糊的原因是：“transform時div的寬度或者高度并不是偶數，偏移 50% 之后，像素點不是整數，和顯示像素沒有對上”。我暫時還不完全理解，我的結論如下文描述。

元素高度的影響

隨機高度是否模糊備注

298	No	-
297	Yes	-
163	Yes	-
178	No	-

結論：當height為偶數時，transform元素不會顯示模糊

當translateY是絕對單位時不會模糊

隨機高度是否模糊備注

42px	No	-
31px	No	-
31px	No	-

結論：當 translateY不為百分比，而是px時也不會顯示模糊

解決辦法

在使用 transform: translate3d(50%, 50%, 0) 時：

• 如果元素的高度可以固定，那么其值設置為偶數即可
• 如果元素的高度不可以固定，看看 translateY 是否可以設置為絕對單位(px)
• 如果上面兩者都不行，可以使用 display: flex; align-items: center 來做，缺點是多了一層父元素
• 如果第三條方法也不行，可以嘗試使用 display: table

參考文檔

stackoverflow blurry-text-on-transformrotate-in-chrome

轉載于:https://www.cnblogs.com/gaollard/p/10005591.html

總結

以上是生活随笔為你收集整理的css: transform导致文字显示模糊的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。