Flipping card animation in memory game not working

Question

So i am a beginner and I am making a memory game using css, javascript and html and the problem that i am facing is that furing the turning animation only one card can actually turn around so i am struggling to animate their turning around

var front=document.getElementsByClassName("front");
var back=document.getElementsByClassName("back");
var frontimage = document.getElementsByClassName("front-img");
var backimage = document.getElementsByClassName("back-img");

front.addEventListener("click",rotate());
front.addEventListener("click",changeimage());

function rotate(){
front.style.animation = "spinning 1 2s Linear";
back.style.animation = "spinning  1 2s Linear";



}


function changeimage(){
setTimeout(()=> {
    frontimage.src="Bounty1.png";

},2000)

}

this is my cards html where i have done all of them in one ul list tag and each card is represented by an li tag:

    <li>
        <div class="back">
            <img class="back-img" src="Bounty1.png">
            
        </div>
            <div class="front">
                
                
                <img class="front-img" src="img1.png">
            </div>


        
    </li>
                
        
    <li>
        <div class="back">
            <img class="back-img" src="Bounty1.png">
            
        </div>
            <div class="front">
                
                
                <img  class="front-img" src="img1.png">
            </div>


        
    </li>

Could you provide html/css or a minimal reproducible example so we can see what the issue is? I'm not quite sure what you are asking. — CoderMuffin, Jan 08 '23 at 10:47
Without your HTML, we can only guess what the cause of your problem is. If the code you posted is your entire Javascript code, and you have multiple cards / card elements (because it's a card flipping memory-type game), you seem to be targeting only one of them. Unless you've created elements which have the same value for their `id` attribute, which would be incorrect. — FiddlingAway, Jan 08 '23 at 11:09
@FiddlingAway is it possible to target multiple tags with the same id — Perdix, Jan 08 '23 at 11:50
I have made an ul tag with multiple li tags and inside of them 2 divs with one has the id front and another has the id back ( i have done this for each card) — Perdix, Jan 08 '23 at 11:57
You can - see [this example](https://jsfiddle.net/1zk4pgyn/). But, it's not good practice, for a variety of reasons, and it's certainly not according to the specifications. For more info, [read this](https://stackoverflow.com/questions/5611963), and [this](https://www.w3.org/TR/html401/struct/global.html#h-7.5.2). — FiddlingAway, Jan 08 '23 at 12:16

score 0 · Answer 1 · answered Jan 08 '23 at 17:53

Here is my interpretation of the issue. When you click the card, it will flip to reveal the image on the back. If I have misunderstood please comment or edit the original post :)

var cards = document.getElementsByClassName("card");

//attach onclick listener for all cards
for (let card of cards) {
    card.addEventListener("click", () => rotate(card));
}

function rotate(card) {
    card.style.animation = "spinning 1 2s linear";

    setTimeout(() => {
        //move card at the back to the front
        card.children[0].style.zIndex = 1;
    }, 1000);
    setTimeout(() => {
        //flip image to correct orientation after animation finish
        card.children[0].children[0].style.transform = "scaleX(1)"; 
    }, 2000);
}

html, body {
  height: 100%;
  width: 100%;
}

@keyframes spinning {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(180deg);
    }
}

.card {
    height: 100px;
    width: 100px;
    position: relative;
}

.card > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.card > div > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.back-img {
    transform: scaleX(-1);
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="card">
        <div class="back">
            <img class="back-img" src="https://via.placeholder.com/300.png/f09/fff" />
        </div>
        <div class="front">
            <img class="front-img" src="https://via.placeholder.com/300.png/09f/fff" />
        </div>
    </div>


    <div class="card">
        <div class="back">
            <img class="back-img" src="https://via.placeholder.com/300.png/f09/fff" />
        </div>
        <div class="front">
            <img class="front-img" src="https://via.placeholder.com/300.png/09f/fff" />
        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>

zer00ne · Answer 2 · 2023-01-08T22:26:41.980

Details are commented in example. The CSS animation was adapted from this article.

/**
 * Collect all .card elements into a NodeList.
 * Register the "click" event to each .card.
 * When the "click" event is triggered on a .card, invoke event handler flip(e)
 */
document.querySelectorAll(".card")
.forEach(card => card.addEventListener("click", flip));

/**
* Toggles the .open class on the element that the user clicked.
*/
function flip(e) {
  this.classList.toggle("open");
}

*,
*::before,
*::after {
  box-sizing: border-box
}

:root {
  font: 300 5vmin/1 Consolas;
}

body {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}

#table {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 8px;
  grid-row-gap: 0.5rem;
  width: 96vw;
  min-height: 100vh;
  margin-left: -40px;
}

/* 
This contains a .card and establishes a "3-D space".
`perspective` is roughly 3 times the value of the animated dimension. 
In this case it's @3x width since rotateX() is horizontal.
*/
.item {
  width: 10.25rem;
  height: 13.85rem;
  perspective: 30rem;
}

/*
This is the element that will be animated. 
`position: relative` defines it's borders as the reference points to
the two .face elements within.
`transition` defines the animation. In this case, `transform` is the property
which is animated, for a duration of 1 second, the easing pattern is "ease".
`transform-style` is neccessary so that .card is associated with it's 
parent's `perspective` property.
`transform-origin` determines where the rotation takes place relative to 
it's parent.
*/
.card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: transform 1s ease;
  transform-style: preserve-3d;
  transform-origin: center right;
}

/* 
Each .card will have two .face elements that represent "front" and "back".
`position: absolute` will keep them within their parent .card element.
`backspace-visibility: hidden` ensures that only one .face can be visible 
at a time.
*/
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 5rem;
  line-height: 13.85rem;
  backface-visibility: hidden;
}

.front {
  background: gold;
}

/*
`transform: rotateY(180deg)` makes .back initially flipped and hidden.
*/
.back {
  background: black;
  transform: rotateY(180deg);
}

/*
When .open is added to .card, the transforms are applied to it.
*/
.open {
  transform: translateX(-100%) rotateY(-180deg);
}

<menu id="table">
  <!-- Each card should have it's own "3D space" as it's parent -->
  <li class="item">
    <section class="card">
      <!-- Each card should have an element for it's "front and one
      for it's back -->
      <div class="face front"></div>
      <div class="face back"></div>
    </section>
  </li>
  <li class="item">
    <section class="card">
      <div class="face front"></div>
      <div class="face back"></div>
    </section>
  </li>
  <li class="item">
    <section class="card">
      <div class="face front"></div>
      <div class="face back"></div>
    </section>
  </li>
  <li class="item">
    <section class="card">
      <div class="face front"></div>
      <div class="face back"></div>
    </section>
  </li>
  <li class="item">
    <section class="card">
      <div class="face front"></div>
      <div class="face back"></div>
    </section>
  </li>
</menu>

Flipping card animation in memory game not working

2 Answers2