css中关于旋转属性trtransform: rotate影响文字轻微变形的解决办法。

在最近搭建自己的网站时遇到了一个问题，如下面图片所：
如上所示，左边的是已有的较为完美的效果，右边的是新建页面时出现的实际效果。
代码是复制粘贴过去的，css样式表用的是同一个。

在笔者查看浏览器控制台两个源码和样式后发现是完全一致（在chorme中出现，但是在火狐浏览器中并未发生字体变形的情况，即右边的样式在火狐中是正常显示）。

在经过一段时间的修改发现，要想实现左边饱满的显示效果，就必须是在body的height大于当前屏幕高度时。

这一点很费解，我在查询了关于trtransform属性的一些信息时，却并未发现文字轻微变形锐利的情况发生。

下面是贴上旋转前和旋转后的css样式和实际效果（当前body的height并未指定数值）：

旋转后：

#fl {
   
	/*设置左边的导航栏样式*/
	position: fixed;