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

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

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

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

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

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

旋转后：

#fl {
	/*设置左边的导航栏样式*/
	position: fixed;
	width: 350px;
	height: 20px;
	/*将整个div旋转270度,实现垂直呈现的效果*/
	transform: rotate(270deg);
	bottom: 220px;
	left: -80px;
}
#fl a {
	font: 16px Californian FB;
}

#fl a:hover {
	color: #7A7A7B;
}

不进行旋转：

#fl {
	/*设置左边的导航栏样式*/
	position: fixed;
	width: 350px;
	height: 20px;
	/*将整个div旋转270度,实现垂直呈现的效果*/
	/* transform: rotate(270deg); */
	bottom: 220px;
	left: -80px;
}
#fl a {
	font: 16px Californian FB;
}

#fl a:hover {
	color: #7A7A7B;
}

结果如上！事实证明旋转属性可能会影响到字体的显示效果。

经过实际测试，并非是因为高度所出现的滚动栏丢失引起，
需要将body的高度设为一个较大的值后（经测试，是大于当前浏览器可视高度后即可恢复正常）。

这个具体原理因为笔者是初学者，实在没办法找到问题的根源，如有好的建议请各位多多提出，共同进步。