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>

問題は、タブ内の「い​​くつかのテキストは」親から回転プロパティを継承しているテキストです。テキストのrotateプロパティを削除する方法。

私は変換スタイルを与えてみました：親に 3D-維持し、変換を与えた：回転X（-30deg）テキストスパンに。しかし、それは動作していません。誰かが親切に手伝ってくれる？

Answer 1

を上書きします。私は、span要素がdisplay:inline-blockにインライン要素に影響を与えないように変換されていないという問題があったと考えています。

また、アンカーのスパンと同じ高さに設定する必要がありましたが、それは軽微な問題です。子テキストを回転

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

Answer 2

transform: none !important 
-webkit-transform: none !important; 
-moz-transform: none !important; 
-ms-transform: none !important; /* FOR IE*/ 

!important宣言は、あなたが行くすべての前回transformの属性ここで