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;
}