IEだけ対応しない

Question

メニュー（要素）をhoverしたら回転してHOME → ホームに変わるボタンを組み込んでいますがIEのみ表示されません。

http://yamapiii.asia/header_menu_test/pc/
上記で現状を見ることが出来ます。

html
<div class="g_nav_area">
<ul>
<li><a href=""><img src="../image/pc/home_icon.png" width="25" height="25" alt="ホーム"><span data-text="ホーム">HOME</span></a></li>
<li><a href=""><img src="../image/pc/service_icon.png" width="25" height="25" alt="サービス"><span data-text="サービス">SERVICE</span></a></li>
<li><a href=""><img src="../image/pc/consul_icon.png" width="25" height="25" alt="コンサルタント"><span data-text="コンサルタント">CONSUL</span></a></li>
<li><a href=""><img src="../image/pc/contact_icon.png" width="25" height="25" alt="お問い合わせ"><span data-text="お問い合わせ">CONTACT</span></a></li>
<li><a href=""><img src="../image/pc/company_icon.png" width="25" height="25" alt="会社概要"><span data-text="会社概要">COMPANY</span></a></li>
</ul>
</div>

css

.g_nav_area {
right: 0px;
top: 24px;
position: absolute;
}

.g_nav_area ul{
font-size: 0px;
}

.g_nav_area ul li{
display: inline-block;
margin-left: 2px;
width: 130px;
border-bottom: solid 2px #affc41;
}

.g_nav_area ul li img{
margin-bottom: 5px;
margin-right:5px;
vertical-align: middle;
}

.g_nav_area ul li a{
font-size: 14px;
display: block;
width: 130px;
color: #affc41;
text-decoration: none;
display: inline-block;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
vertical-align: bottom;
overflow: hidden;
}

.g_nav_area ul li a span{
display: inline-block;
position: relative;
padding: 0 .3em;
transition: .4s;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.g_nav_area ul li a span:after{
display: inline-block;
position: absolute;
width: 130px;
left: 0;
top: 0;
content: attr(data-text);
padding: 0 .3em;
color: #affc41;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: translate3d(0, 105%, 0) rotateX(90deg);
transform: translate3d(0, 105%, 0) rotateX(90deg);
}

.g_nav_area ul li a:hover span {
-webkit-transform: translate3d(0, 0, -30px) rotateX(-90deg);
transform: translate3d(0, 0, -30px) rotateX(-90deg);
}

Answer 1

Partial support in IE refers to not supporting the transform-style: preserve-3d property. This prevents nesting 3D transformed elements.

3D TransformはIE10,11ともに部分サポートです。
can i useの情報によるとtransform-style: preserve-3dはサポートしていない、とのことですので、
上記のコードはIEでは再現されないと思われます。