当我运行以下旋转卡片代码时,它在除 safari 浏览器之外的所有设备上都能正常工作。图标和卡片有问题。我可以看到如果我将变换样式设置为“preserve-3d”,图标会出现此问题。但我希望它保持二维。为什么safari浏览器会出现这个问题,以及如何解决这个问题。请帮助。
<style>
.card {
height: 500px;
width: 300px;
position: relative;
background-color: antiquewhite;
transform-style: flat;
}
.panel {
position: absolute;
top: 50%;
left: 50%;
backface-visibility: hidden;
width: 80%;
height: 80%;
transform: translate(-50%, -50%);
transition: transform 1s;
}
.back {
transform: translate(-50%, -50%) rotateY(180deg);
background-color: purple;
}
.front {
background-color: yellowgreen;
}
.card.clicked .front {
transform: translate(-50%, -50%) rotateY(-180deg);
}
.card.clicked .back {
transform: translate(-50%, -50%) rotate(0);
}
.icon {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-color: olive;
border-radius: 50%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
</style>
<div class="card">
<div class="front panel"></div>
<div class="back panel"></div>
<div class="icon">CLICK</div>
</div>
<script>
document.querySelector(".card").addEventListener("click", function () {
this.classList.toggle("clicked");
});
</script>