Css transform altering text in ui-bootstrap uib-tabs - css

Question

I have the following css:
.tabstyle {
color: #ffffff;
font-weight: bold;
outline: 1px solid transparent;
border-radius: 10px 10px 0 0;
background: #C8DEE9;
box-shadow: inset 0 -3px 3px rgba(0, 0, 0, 0.05);
content: '';
-webkit-transform: perspective(5px) rotateX(0.93deg) translateZ(-1px);
transform: perspective(5px) rotateX(0.93deg) translateZ(-1px);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
font-family: "Raleway", sans-serif !important;
font-style: normal;
margin: 0;
}
However, when this renders, the tab looks as expected, but the text is skewed, I thought I could do something like:
.nav-tabs li a {
width: 200px;
font-size: 18px;
line-height: 2;
**transform: rotateX(-0.93deg)**
font-style: normal !important;
text-align: center;
font-family: "Times New Roman", Georgia, Serif;
margin: 0;
}
But no go, how do I de-skew the resulting text?
Update:
Update #2:
<uib-tabset active="activeTab" >
<uib-tab index="$index + 1" classes="tabstyle" ng-repeat="tab in tabData" ng-if="!tab.disabled" select="changeTab(tab.route)">
<uib-tab-heading>
<span class="material-icons {{tab.icon}}" style="vertical-align: middle"></span> {{tab.heading}}
</uib-tab-heading>
<!--<div ng-include="tab.content"></div>-->
</uib-tab>
</uib-tabset>