0
我正在尝试使图像旋转并显示其他图像或者显示一些文本。旋转变换在FF中无法正常工作，并且在IE中无法正常工作
我在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;
}