Html 如何阻止变换旋转使字体变形？

我正在使用transform rotation css属性来旋转一个div，这样我就可以在我的页面上使用它作为固定的facebook和twitter链接，altho，当我使用它时，它会“扭曲”我当前的文本字体。当我停止旋转时，文本会恢复正常。有办法解决这个问题吗

我的div是社交[[facebook]、[twitter]]

以下是内部div的css：

#facebook,#twitter{
    display:inline-block;
    font-family:"lucida grande",tahoma,verdana;
    font-weight:bold;
    width:125px;
    margin:0px;
}

以下是社交网站的css：

#social{
position:absolute;
right:-120px;
bottom:50%;
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
}

---

我只想让文字看起来清晰晶莹，而不是扭曲。有没有其他方法不会改变/扭曲我的字体

当我们旋转一个元素时，一些网页字体会出现这种失真。您可以尝试应用

backface visibility:hidden

来解决此失真。希望能帮助你

以下是一个例子：

.fix语言{
字体系列：“Arial”，无衬线；
位置：绝对位置；
左：-90px；
顶部：120px；
变换：旋转（-90度）；
}
.fix语言ul{
列表样式：无；
填充：0；
保证金：0；
}
.fix语言ul li{
显示：内联块；
右边距：15px；
}
.fix语言ul li a{
颜色：$黑色；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
显示：内联块；
}

在FF/Mac中对我来说很好。不过，我在旋转的文本上看不到背景色——也许这会有所帮助。查看前面的答案：您正在使用什么浏览器（和版本）进行测试？这类事情总是基于浏览器渲染引擎的功能，因此将是非常特定于浏览器的。使用chrome，我非常确定是最新版本。所以，chrome使用引擎渲染文本！？