Back button to all articlesAll articles

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 !

The animation taught in this post

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 😄