How to create a HTML5 3D flipping card animation… in 2D using Phaser

If you plan to create card games, it will come a time when you have to show covered cards, showing their backs, and then you need to flip them showing their value.

Normally, with a 3D engine it would be really an easy task, as it’s just a primitive which flips along one of its axis.

What to do when we aren’t using a 3D engine? We can fake the flip movement using a couple of Phaser tweens.

We can zoom the card along its vertical axis, giving the feeling the card is being raised, while we shrink it along its horizontal axis until the card is just a line – that’s the moment when the card is perpendicular to the table.

Then we change card frame, lower the card acting on its y scale while we enlarge it along its horizontal axis to slowly show the new frame.

Click or tap on the card to make it flip.

Here is the completely commented source code, for you to play:

Now you can add some realism to your 2D card games. Next time I will show you how to add shadows and another couple of interesting effects, meanwhile download the source code.

  • Stefan Neidig

    I once read an article, which explained such a mechanism. It was overly complicated and not understandable. Yet there is yours, which explains it to the point. Scale x to zero. Set the new frame. Scale it back to 1. Genius! Thanks!

    • Emanuele Feronato

      and don’t forget to zoom in/out the y axis to give some more fake 3d effect to the card

  • Gonzalo

    Awesome feature as always, Emanuele. I’m doing games for tarot sites and this animation is gold for me. Thanks!

    • Emanuele Feronato

      glad you found it useful