Question

我有简单的菜单代码

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

我尝试设置变换：旋转课程＆＃34; glavnaja＆＃34;

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

但在那之后我看到了文字失真。我找到了这个话题CSS rotation and text distortion，但它没有用。我将非常了解如何解决它的建议。谢谢！

Answer 1

CSS变换在计算子像素值时经常会导致模糊，这只是野兽的本质。

一种解决方案是将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>元素中闲逛！

变换：在菜单上旋转5deg会扭曲文本

1 个答案: