css - transform:rotate 5deg 在菜单上扭曲文本

Question

我有菜单的简单代码

<nav class="top-menu">
        <li class="glavnaja">Главная</li>
        <li>Новости</li>
        <li>Выставки</li>
        <li>Распродажи</li>
        <li>Вакансии</li>
        <li class="last-li">Форум</li>
        </nav>

我尝试在“glavnaja”类上设置 transform:rotate

.glavnaja {
    transform:rotate(5deg);
    -webkit-backface-visibility: hidden;    
        backface-visibility: hidden;
}

但在那之后我看到了文字失真。我找到了这个话题 CSS rotation and text distortion但它不工作。我将非常乐意提供有关如何修复它的建议。谢谢!

Answer 1

在计算子像素值时，CSS Transforms 通常会导致模糊，这是野兽的天性。

一种解决方案是添加 perspective和 backface-visibility容器的值，如下所示:

.top-menu {
  backface-visibility: hidden;
  perspective: 1000px;
}
.glavnaja {
  transform: rotate(5deg);
}

在 Webkit 中它肯定有帮助，而且 Firefox 似乎也已经清理干净了。

演示: http://codepen.io/shshaw/pen/eGHoh

此外，您应该注意，您仍然需要嵌套 <li> <ul> 中的元素或 <ol> .他们不能只是闲逛 <nav>元素自己!