To make an image flip when clicked?

Question

How do I go about doing this and what language would be best please? I want to make a card game that reveals the other side of the card when clicked?

Answer 1

Here on Sololearn you'll have to use a combination of HTML, CSS and JS for graphic related codes.

CSS lets you rotate an element by 180 degree using
transform: rotateY( 180deg ).

With JS, you can make a function that triggers when your card is clicked and rotates the element back to 0 degree, e.g.
function flipCard( el ) {
el.style.transform = "rotateY( 0deg )";
}

In order to animate a flip, you should look into the transition property of CSS:
https://www.sololearn.com/learn/CSS/2249/

Furthermore, you should make sure to set
backface-visibility: hidden;
on your card because otherwise a mirror image of the foreground would be visible while it is rotated.

You can find some reference codes here on Sololearn that you could use as a tutorial, I'll link a few here:
https://code.sololearn.com/W3cxz8tzg8UM/?ref=app
https://code.sololearn.com/WGy766e4ej74/?ref=app
https://code.sololearn.com/W6vafqd00pdS/?ref=app
https://code.sololearn.com/WkAWfUHEjHis/?ref=app
https://code.sololearn.com/W3CBmnJq8q5u/?ref=app

Answer 2

Shadow Thank you very much for all your help. It seems much more achievable now I have a staring point 😂