這是因?yàn)椋瑃ransform變換會(huì)在瀏覽器上單獨(dú)創(chuàng)建一個(gè)繪畫(huà)層并重新進(jìn)行渲染，rotate渲染的時(shí)候，由于圖層渲染的時(shí)候也處理了周?chē)奈淖郑绻叨葹槠鏀?shù)的文字可能會(huì)存在半個(gè)像素的計(jì)算量，瀏覽器對(duì)這半個(gè)像素會(huì)進(jìn)行優(yōu)化渲染，所以邊緣會(huì)出現(xiàn)模糊的情況。
優(yōu)化方法：
- 將transform: translate(-50%, -50%)改成transform: translate3d(-50%, -50%, 0)可以解決抖動(dòng)，但仍然模糊。
- 將元素的高度設(shè)置為偶數(shù)可解決；
- 將transform: translate(-50%, -50%)中的y軸單位改成px也可以解決
- 改成transform: translate(-50%, -52%)也可以解決（如果52%不行則從51%每個(gè)百分比嘗試）
最優(yōu)解決方法：
不使用transform居中。改用flex完成垂直居中，設(shè)置排列方向?yàn)閏olumn，并設(shè)置justify-content: center，最后用text-align: center完成水平居中。方能保證文字顯示清晰。
