CSS - 删除子元素的 rotateX

Question

我有以下选项卡。

它的代码是。

.nav-tabs li a {
  color: $color_1;
      -webkit-transform: perspective(100px) rotateX(30deg);
      -moz-transform: perspective(100px) rotateX(30deg);
      height:32px;
      background: #fff;
      border-radius: 4px;
      border:1px solid #ccc;
      margin:0 10px 0;
      box-shadow: 0 0 2px  #fff inset;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs" role="tablist">
      
     <li role="presentation">
      <a href="#home" aria-controls="home" role="tab" data-toggle="tab"><span><i class="fa fa-envelope-o" aria-hidden="true"></i>
       Some text</span></a>
     </li>
     <li role="presentation" class="active">
      <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"><span><i class="fa fa-search" aria-hidden="true"></i>
       Some Text</span></a>
     </li>
     <li role="presentation">
      <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab"><span><i class="fa fa-comment" aria-hidden="true"></i>Some Text</span></a>
     </li> 
   </ul>

问题是选项卡内的文本“Some text”继承了其父项的旋转属性。如何移除文本的旋转属性。

我尝试将 transform-style: preserve-3d 赋予父元素，并将 transform: rotateX(-30deg) 赋予文本范围。但它不起作用。有好心人帮忙吗。

Answer 1

给你。我怀疑问题在于 span 元素未设置为 display:inline-block 作为不影响内联元素的转换。

我还必须在跨度上设置一个与 anchor 相等的高度，但这似乎是个小问题。

.nav-tabs li a {
  -webkit-transform: perspective(100px) rotateX(30deg);
  -moz-transform: perspective(100px) rotateX(30deg);
  height: 32px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin: 0 10px 0;
  box-shadow: 0 0 2px #fff inset;
  transform-style: preserve-3d;
  color: red;
}
.nav-tabs li a span {
  -webkit-transform: rotateX(-30deg);
  -moz-transform: rotateX(-30deg);
  display: inline-block;
  height: 32px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs" role="tablist">

  <li role="presentation">
    <a href="#home" aria-controls="home" role="tab" data-toggle="tab"><span><i class="fa fa-envelope-o" aria-hidden="true"></i>
       Some text</span></a>
  </li>
  <li role="presentation" class="active">
    <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"><span><i class="fa fa-search" aria-hidden="true"></i>
       Some Text</span></a>
  </li>
  <li role="presentation">
    <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab"><span><i class="fa fa-comment" aria-hidden="true"></i>Some Text</span></a>
  </li>
</ul>