我目前正在寻求在一个网站上实现一个功能，该网站有多个包含正面和背面（单独的图像）的卡片。最初我只想显示正面，点击后，我希望卡片在正面和背面之间多次旋转 360 度，然后将正面作为模态显示。我还希望当模态框设置在视图之外时反转此动画。
这就是我想要实现的=> https://tcg.pokemon.com/en-us/galleries/temporal-forces/#seeall
这是我的卡片的基本 HTML 结构：
<div class="card">
<a class="card-img card-img-front" href="front.jpg">
<img src="front.jpg" alt="Front of card">
</a>
<a class="card-img card-img-back" href="back.jpg">
<img src="back.jpg" alt="Back of card">
</a>
</div>
我不介意为此使用库。知道如何解决这个问题吗？
我已经尝试过使用 Fancybox 库，并且能够在单击前面部分时实现模态，但在实现图像的背面时完全不成功，特别是 360 旋转动画。
此代码可能对您有帮助。它使用内置的
onclick <style>
.card {
width: 200px;
height: 300px;
perspective: 1000px;
}
.card-img {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
transition: transform 0.5s;
}
.card-img-back {
transform: rotateY(180deg);
}
.flipped .card-img-front {
transform: rotateY(180deg);
}
.flipped .card-img-back {
transform: rotateY(0deg);
}
</style>
</head>
<body>
<div class="card" onclick="this.classList.toggle('flipped')">
<div class="card-img card-img-front">
<img src="https://i.ebayimg.com/images/g/9GgAAOSwWzRf6~P4/s-l960.webp" alt="Front of card" width=300 height=500>
</div>
<div class="card-img card-img-back">
<img src="https://bicyclecards.org/wp-content/uploads/2019/11/red-56.jpg" alt="Back of card" width=300 height=500>
</div>
</div>