Comment ajouter un effet de flip cards dans une campagne memory ?

Qu'est-ce qu'un effet de flip cards ?

Un effet de flip cards est une animation qui fait basculer une carte de face en dos (ou vice versa) lorsque l'utilisateur clique dessus.

Comment puis-je créer cet effet dans ma campagne memory ?

Voici les étapes pour ajouter un effet de flip cards avec du code CSS et JavaScript :

Étape 1 : Utilisez le CSS suivant pour styliser les cartes et créer l'effet de flip.

Ajoutez le code CSS suivant dans l’onglet CSS de l’étape look and feel.

/* CSS Flip cards */

.card {
perspective: 1000px;
cursor: pointer;
box-shadow: none !important;
}
.content_img {
transform-style: preserve-3d;
transition: transform 0.5s;
}
.content_photo::before{
transform: rotateY(0deg);
}
.card.flipped .content_photo::before{
transform: rotateY(180deg);
}
.card.flipped .content_img {
transform: rotateY(180deg);
}
.card.flipped .content_photo img {
transform: rotateY(180deg);
}

Étape 2 : Ajoutez le JavaScript pour manipuler les cartes

Enfin, utilisez du code JavaScript pour ajouter la logique permettant de retourner les cartes lorsqu'elles sont cliquées :

Dans la tag library vous pouvez créer un nouveau “Tag name”:

flip_cards_effect.

Ensuite, ajoutez le code JavaScript dans la section body.

<script>
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('click', function() {
this.classList.toggle('flipped');
});
});
</script>

En suivant ces étapes, vous pouvez facilement ajouter un effet de flip cards à votre jeu de memory, améliorant ainsi l'expérience utilisateur avec une animation visuellement attrayante.