I am currently looking to implement a feature on a website where there are multiple cards which contain a front and a back side (separate images). Initially I only want to show the front, and upon click, I want the card to rotate 360 degrees multiple times betweem the front and the back before the front being put on display as a modal. I also want this animation reversed when the modal is set out of view.

This is what I’m trying to achieve => https://tcg.pokemon.com/en-us/galleries/temporal-forces/#seeall

And this is the basic HTML structure of my card:

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

I don’t mind using libraries for this. Any idea on how to go about this?

I’ve already tried using the Fancybox library and was able to achieve the modal upon click for the front part but I was completely unsuccesful in implementing the back of the image, particularly the 360 rotation animation.