CSS转换而不转换其内容

Question

我正在使用变换来制作我的<li>s,如下所示

这是我的代码

.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>

li标签被转换为我的期望,但它的内容也被转换,这使得文本模糊(你可以看到它不清楚).有什么方法可以避免这种情况吗？

还有一个问题,在FF浏览器上查看,左侧边框看起来不平滑.你知道为什么以及如何解决这个问题吗？

问候,肯

---

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

我想添加一个"突出显示"的类调用来填充li标签的背景颜色.

.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>

以上方式.颜色被填充并装在边框中,但它覆盖了文本.

请帮我解决这个问题.

谢谢,肯

Answer 1

首先声明一个perspectiveonparent元素来3d transform在多个元素上创建，我们在这里所做的就是用作li甚perspective至rotated那样，所以它是blur在 span 标签文本上创建的。而是使用选择器在元素上pseudo旋转X-axis并声明，如下所示，perspectiveli

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>