3D Card Flip Effect

  • 41 favourites



6,154 visits, 12,997 views




This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Construct 2 Layout

Create 3 new sprites, call them “Front”, “Back” and “3D Card”.

Import the 3D Card frames to the animations of the “3D Card”.

Import the back and front images to back and front Sprites individually.

Make sure they are all the same size.

Stack them all on the same position, the back on top, then the front and the 3D card at the bottom.

Construct 2 Events

Create 4 Global Vars

We will be use the straight line equation to calculate the “rotation” of front and back card, please read more here about the straight line equation:


Set the initial values on the start of the layout:

Set Flipped each time the 3D animation completes:

Start the animation with the 3D card is clicked/touched:

We will be resizing the front and back images according to the current animation frame of the 3D card, this resign value is Value (Global)

If the card isn't flipped, the Front image must show, and be resized until the animation is half way, we then hide the front image, and show the back image, which start size is 0, as the animation goes on, we increase the size of the back image.

If the card is flipped, we do the same as above, but with the back image being shrunk, and the front image made bigger.

And that is it, this project can now be used for any card games, just by changing the Front and Back images.

Note: If you require better looking card, texture it in Blender. Not on the front and back images.

Download CAPX


  • Order by
Want to leave a comment? Login or Register an account!