CSS 转换而不转换其内容答案

【问题标题】：CSS transformation without transforming its contentCSS 转换而不转换其内容
【发布时间】：2017-10-07 06:04:53
【问题描述】：

我正在使用转换来制作我的<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

我想添加一个类调用“highlighted”来填充 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>

以上方式。颜色已填充并适合边框，但会覆盖文本。

请帮我解决这个问题。

谢谢，肯

【问题讨论】：

标签： html css transform

【解决方案1】：

首先在parent元素上声明一个perspective以在多个元素上创建3d transform，我们在这里所做的是使用li作为perspective甚至rotated，所以它创建了blur跨度标签文本。而是使用pseudo 选择器在X-axis 处旋转并在li 元素上声明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 我想添加一个名为“highlighted”的类来填充第一个选项卡的背景颜色。如果我将 css 声明为 .highlighted { background-color: darkgray; } 所以颜色被填充但不适合边框。如果我声明 .highlighted:before { background-color: darkgray; } 所以颜色被填充并适合边框，但它覆盖了 span 标签中的文本。请参阅更新的问题。你能帮我解决这个问题。谢谢，
@Ken 如果您需要具有与在 x 轴上旋转相同效果的背景颜色，那么您需要为伪选择器添加背景，并且由于两个边框、背景相同，所以它的边框被隐藏了。检查这个jsfiddle.net/4gw31grx
我只想为具有“突出显示”类的 li 添加背景颜色，其他应该是白色（无颜色）。我更新了问题，请看一下。谢谢。
@Ken 因为我使用了伪选择器，所以你需要使用 nth-child 然后定位它而不是添加一个新类到 li 标签jsfiddle.net/4gw31grx/1
有没有使用高亮类？实际上，它们是菜单的选项卡，并且“突出显示”类是通过使用 ng-class (angularjs) 添加的。所以我不确定哪个选项卡、第一个/第二个或第三个选项卡将被填充颜色。这只是一个示例. 这就是为什么我必须使用那个类来填充背景颜色，@frtn

【解决方案2】：

如果您将这些跨度设置为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>

至于 FF 中的锯齿状边框渲染，实际上在我的 MacBook 上看起来还不错。最简单的解决方案可能是只使用图像作为背景，而不是对选项卡轮廓使用变换。

希望对你有帮助！

【讨论】：