CSS变换而不改变其内容的转换

Question

我正在使用变换（transforms）来制作我的<li>如下图所示

以下是我的代码

.tab-nav {
    width: 100%;
    height: 40px;
    margin-top: 100px;
}

.tab-nav-li {
    display: inline-block;
    border: solid 1px gray;
    margin: 0 5px;
    min-width: 170px;
    min-height: 40px;
    line-height: 40px;
    text-align: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    transform: perspective(38px) rotateX(2deg);
    transform-origin: bottom;
}

<div class="tab-nav">
    <ul>
        <li class="tab-nav-li">
            <span>The first tab</span>
        </li>
        <li class="tab-nav-li">
            <span>The second tab</span>
        </li>
        <li class="tab-nav-li">
            <span>The third tab</span>
        </li>
    </ul>
</div>

标签已按照我的期望进行了转换，但其内容也被转换了，这导致文本模糊（如您所见，不清晰）。有没有办法避免这种情况？

还有一个问题，在FF浏览器中查看时，左侧边框看起来不太平滑。您知道原因以及如何解决此问题吗？

敬礼， 肯恩

---

更新于2017年5月9日-下午5:19

我想为

标签添加一个名为“highlighted”的类，以填充背景颜色。

.tab-nav {
  width: 100%;
  height: 40px;
  margin-top: 100px;
}

.tab-nav-li {
  display: inline-block;
  margin: 0 5px;
  min-width: 170px;
  min-height: 40px;
  line-height: 40px;
  perspective: 38px; /*Declaring here*/
  position: relative;
}

.tab-nav-li:before {
  content: "";
  width: 100%;
  height: 40px;
  position: absolute;
  border: solid 1px gray;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  transform: rotateX(2deg);/*Then rotate*/
  transform-origin: bottom;
}

span {
  display: block;
  text-align: center;
}

.highlighted {
  background-color: darkgray;
}

<div class="tab-nav">
    <ul>
        <li class="tab-nav-li highlighted">
            <span>The first tab</span>
        </li>
        <li class="tab-nav-li">
            <span>The second tab</span>
        </li>
        <li class="tab-nav-li">
            <span>The third tab</span>
        </li>
    </ul>
</div>
 

从上面的结果可以看出，颜色已经填充了，但却没有适应边界。

.tab-nav {
  width: 100%;
  height: 40px;
  margin-top: 100px;
}

.tab-nav-li {
  display: inline-block;
  margin: 0 5px;
  min-width: 170px;
  min-height: 40px;
  line-height: 40px;
  perspective: 38px; /*Declaring here*/
  position: relative;
}

.tab-nav-li:before {
  content: "";
  width: 100%;
  height: 40px;
  position: absolute;
  border: solid 1px gray;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  transform: rotateX(2deg);/*Then rotate*/
  transform-origin: bottom;
}

span {
  display: block;
  text-align: center;
}

.highlighted:before {
  background-color: darkgray;
}

<div class="tab-nav">
    <ul>
        <li class="tab-nav-li highlighted">
            <span>The first tab</span>
        </li>
        <li class="tab-nav-li">
            <span>The second tab</span>
        </li>
        <li class="tab-nav-li">
            <span>The third tab</span>
        </li>
    </ul>
</div>

以上方法可以填充和适应边框，但它会覆盖文本。

请帮我解决这个问题。

谢谢， 肯恩

- Ken

Answer 1

首先，在父元素上声明一个perspective，以在多个元素上创建3d transform。我们在这里使用了li作为perspective，甚至对其进行了rotated，因此在标签文本上创建了blur。相反，使用pseudo选择器在X轴上旋转，并在li元素上声明perspective，如下所示：

perspective CSS属性确定z = 0平面和用户之间的距离，以便为3D定位的元素提供一些透视效果。

.tab-nav {
  width: 100%;
  height: 40px;
  margin-top: 100px;
}

.tab-nav-li {
  display: inline-block;
  margin: 0 5px;
  min-width: 170px;
  min-height: 40px;
  line-height: 40px;
  perspective: 38px; /*Declaring here*/
  position: relative;
}

.tab-nav-li:before {
  content: "";
  width: 100%;
  height: 40px;
  position: absolute;
  border: solid 1px gray;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  transform: rotateX(2deg);/*Then rotate*/
  transform-origin: bottom;
}

span {
  display: block;
  text-align: center;
}

<div class="tab-nav">
    <ul>
        <li class="tab-nav-li">
            <span>The first tab</span>
        </li>
        <li class="tab-nav-li">
            <span>The second tab</span>
        </li>
        <li class="tab-nav-li">
            <span>The third tab</span>
        </li>
    </ul>
</div>

- frnt

---

非常感谢，@frnt 我想要添加一个名为“highlighted”的类来填充第一个选项卡的背景颜色。如果我声明CSS如下： .highlighted { background-color: darkgray; } 那么颜色会被填充，但不适合边框。 如果我声明： .highlighted:before { background-color: darkgray; } 那么颜色会被填充并适合边框，但它会覆盖span标签中的文本。请查看更新的问题。你能帮我解决这个问题吗？谢谢， - Ken

@Ken 如果你需要与x轴旋转相同效果的背景颜色，那么你需要将背景添加到伪选择器中，并且由于边框和背景相同，所以它的边框被隐藏了。请查看此链接 https://jsfiddle.net/4gw31grx/ - frnt

我只想为具有“highlighted”类的li添加背景颜色，而其他li应该是白色（无颜色）。 我更新了问题，请看一下。 谢谢。 - Ken

我做到了！！！ 我为span使用了z-index 1，但它并不起作用。只需按照您的建议将z-index设置为-1，一切问题都得到解决。感谢您的帮助。我无法表达我的感激之情。 非常爱你 :D - Ken

让我们在聊天中继续这个讨论。 - frnt

Answer 2

如果您将这些span设置为display:inline-block，则可以通过基本应用相反的效果来“重置”它们上的变换。这将清除内容的倾斜：

.tab-nav {
    width: 100%;
    height: 40px;
    margin-top: 100px;
}

.tab-nav-li {
    display: inline-block;
    border: solid 1px gray;
    margin: 0 5px;
    min-width: 170px;
    min-height: 40px;
    line-height: 40px;
    text-align: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    transform: perspective(38px) rotateX(5deg);
    transform-origin: 50%;
}

.tab-nav-li span {
    display: inline-block;
    transform: perspective(38px) rotateX(-5deg);
}

<div class="tab-nav">
    <ul>
        <li class="tab-nav-li">
            <span>The first tab</span>
        </li>
        <li class="tab-nav-li">
            <span>The second tab</span>
        </li>
        <li class="tab-nav-li">
            <span>The third tab</span>
        </li>
    </ul>
</div>

关于在Firefox中出现的锯齿边框渲染问题，在我的MacBook上使用Firefox看起来还不错。最简单的解决方案可能是使用图像作为背景，而不是使用变换来绘制选项卡轮廓。希望能对您有所帮助！

- Rich