html - CSS 在 IE 11 中不起作用

Question

我在 Chrome、FF 和 IE 上尝试了这个 css，问题在 IE 上不工作

.social {
    width: 100px; height: 100px;    
    display: block; text-align: center; 
    transform:rotateY(0deg);
    transition:transform .5s ease-out;
    transform-style:preserve-3d;
}
.social > div {
    width: 100px; height: 100px; background: #fff;
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;    
}
.social >.front {
    transform:translateZ(40px);    
}
.social >.back {
    transform:rotateY(-100deg) translateZ(40px);
}
.social:hover {
    transform: rotateY(100deg);
}

html代码:

<a class="social" href="search_resultsv.aspx"  onmouseover="document.getElementById('m_01').style.boxShadow = '0px 0px 5px #CCC'" onmouseout="document.getElementById('m_01').style.boxShadow = ''">
     <div class="front"><i class="fa fa-facebook"><img src="Content/menu/main/01_m.png" /></i></div>
     <div class="back"><i class="fa fa-facebook"><img id="m_01" class="img_shadow" src="Content/menu/main/01_b.png" /></i></div>
</a>  

我网站上的在线演示:feee3.com

Answer 1

transform-style:preserve-3d 目前不支持 IE!

transform 仍然是一项实验性技术。考虑使用供应商前缀:

-女士- ,-webkit- ,-moz-