Creating a custom CSS loader of a Yu-Gi-Oh card flipping

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 🎁

1<div class="card-wrapper"></div>
2

1// Our card flip animation, simply rotates the element on the Y
2// axis and then goes back to its original state
3@keyframes cardFlip {
4  0% {
5    transform: rotateY(0deg);
6  }
7  50% {
8    transform: rotateY(180deg);
9  }
10  100% {
11    transform: rotateY(0deg);
12  }
13}
14
15.card-wrapper {
16  position: relative;
17  transform-style: preserve-3d;
18  animation: cardFlip 3s ease-in-out infinite;
19  width: 100px;
20  height: 150px;
21}
22

Here transform-style defines each children element as 3D. When used in conjunction with backface-visibility and 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 🎴

1<div class="card-wrapper">
2  <img class="card" src="front.jpg" alt="" />
3  <img class="card card-back" src="back.jpg" alt="" />
4</div>
5

1.card {
2  position: absolute;
3  backface-visibility: hidden;
4  width: 100px;
5  height: 150px;
6}
7
8// By default, we rotate the back of the card out of view
9// This way, when the animation triggers, the front and back
10// swap places back and forth
11.card-back {
12  transform: rotateY(180deg);
13}
14

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 😄