You read that right, it's time to bring out your Blue Eyes White Dragon and d-d-d-d-deliver some nice animations to your side projects. Bear with me while I revisit my childhood please, and in the meantime, let's have some fun with CSS 🥰
If you wish to jump right into the solution, here's the Codesandbox link, enjoy !
Step 1: Create the wrapper 🎁
transform-style defines each children element as 3D. When used in conjunction with
transform, it will allow us to use the back and front as tangible 3D objects that can be rotated.
Step 2: Create each card face 🎴
backface-visibility defines the back of the card as hidden by default, this way, when it turns, we won't simply see the same face twice.
And that's it, short and sweet.
I struggled a bit to implement it at first and figured it would be worth documenting !
Whether you play Magic: the Gathering, Yu-Gi-Oh!, Flesh and Blood, Vanguard or any other TCG, I'm sure you'll find that animation a bit nostalgic.
Feel free to follow me on Twitter (if it's still around by the time you read this article) - it's always fun chatting with some of you and sharing tips & tricks together 😄