我在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
transform-style：preserve-3d当前不支持IE！
转换仍然是一项实验技术。考虑使用供应商前缀：
-ms-，-webkit-，-moz-
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句