Html CSS翻转卡动画仅在Firefox中无法正常工作
您好,我正在用CSS制作翻转卡动画,在Chrome或Edge中,它的工作原理是这样的:正面 背面 但当我在Firefox中打开它时,前面的图像根本不会消失。当我翻转图像时,它会停留在那里。。。像这样:我能做什么 我的CSS代码是:Html CSS翻转卡动画仅在Firefox中无法正常工作,html,css,flip,Html,Css,Flip,您好,我正在用CSS制作翻转卡动画,在Chrome或Edge中,它的工作原理是这样的:正面 背面 但当我在Firefox中打开它时,前面的图像根本不会消失。当我翻转图像时,它会停留在那里。。。像这样:我能做什么 我的CSS代码是: .flip-card { background-color: white; width: 510px; height: 510px; perspective: 1000px; } .flip-card-inner { position: re
.flip-card {
background-color: white;
width: 510px;
height: 510px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #ffffff;
color: black;
z-index: 2;
}
.flip-card-back {
background-color: #39b54a;
color: black;
transform: rotateY(180deg);
z-index: 1;
}
我的HTML代码是:
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="images/sumergible.png" style="width: 400px; height: 400px;">
</div>
<div class="flip-card-back"><br><br>
<center> <h4 style="border-bottom: 2px solid black; display: inline-block;">Bombas sumergibles </h4></center>
<p class="descproducto" align="justify">Estos modelos vienen equipados con un termostato que apaga los motores automáticamente si se
sobrecalientan durante su uso.
Gracias a su diseño y a sus motores especiales, estos modelos gozan de un tiempo de vida más
prolongado y menor consumo energético.
Cable de alimentación de 10 m de largo.
</p>
<button class="collapsible insideboton" style="background-color: black;" id="myBtn1" >Detalles </button>
</div>
</div>
</div>
Bombas sumergibles
Estos vienen车型的自动测试设备
苏苏苏索。
格雷西亚斯·苏迪尼奥·苏斯·摩托,特别是摩托,他是一个摩托人
延长能源消耗。
拉戈10米餐饮电缆。
德塔莱斯
请检查您的z索引。将卡翻转回3
.flip-card-back {
background-color: #39b54a;
color: black;
transform: rotateY(180deg);
z-index: 3;
}
正在检查我创建的代码笔,请检查z索引。将卡翻转回3
.flip-card-back {
background-color: #39b54a;
color: black;
transform: rotateY(180deg);
z-index: 3;
}
它正在检查我创建的代码笔