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
