我正在尝试让图像旋转，并在后面显示另一个图像或一些文字。
我在Chrome上工作正常但是当我在Firefox上试用时，旋转工作但后面的图像显示在前面。
IE确实根本不起作用，但是从谷歌搜索我发现它似乎IE不支持preserve-3d但我找不到令人满意的FF答案。
奇怪的是，带有图像背后文字的旋转在FF上工作正常，而不是图像。
这是我的HTML：
<div class="f1_container">
<div class="f1_card" class="shadow">
<div class="front face">
<img src="images/beesm.jpg"/>
</div>
<div class="back center">
<img src="images/flysm.jpg"/>
</div>
</div>
</div>
并且继承了我的CSS：
.f1_container {
position: relative;
margin: 10px auto;
width: 600px;
height: 397px;
z-index: 1;
margin-top: 20px;
margin-bottom: 20px;
}
.f1_container {
perspective: 1000;
}
.f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
.f1_container:hover .f1_card {
transform: rotateY(180deg);
box-shadow: -5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align: left;
background-color: #cac8c8;
}