旋转变换在 FF 中不能正常工作，在 IE 中根本不能工作

Question

我正在尝试让图像旋转并在后面显示另一个图像或一些文本。

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

Answer 1

我发现这个网站会在您粘贴 CSS 代码后自动添加所有供应商前缀。 http://pleeease.io/play/ 确保您的代码与所有浏览器兼容。