这是因为，transform变换会在浏览器上单独创建一个绘画层并重新进行渲染，rotate渲染的时候，由于图层渲染的时候也处理了周围的文字，如果高度为奇数的文字可能会存在半个像素的计算量，浏览器对这半个像素会进行优化渲染，所以边缘会出现模糊的情况。

优化方法：

1. 将transform: translate(-50%, -50%)改成transform: translate3d(-50%, -50%, 0)可以解决抖动，但仍然模糊。
2. 将元素的高度设置为偶数可解决；
3. 将transform: translate(-50%, -50%)中的y轴单位改成px也可以解决
4. 改成transform: translate(-50%, -52%)也可以解决（如果52%不行则从51%每个百分比尝试）

最优解决方法：
不使用transform居中。改用flex完成垂直居中，设置排列方向为column，并设置justify-content: center，最后用text-align: center完成水平居中。方能保证文字显示清晰。