How do I animate multiple elements using CSS

Question

I have been learning some simple CSS animations like this card flip, however when I create the next card element the animation seems to break and doesn't execute.

The animation itself is pretty basic, onclick the card should be flipped horizontally. I wonder if I have to create extra listener to 2nd card in order to animate it?

flipCard();

function flipCard() {
  var card = document.querySelector('.card');
  card.addEventListener('click', function() {
    card.classList.toggle('is-flipped');
  });
}

body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  overflow: hidden;
  color: #fff;
  background: hsl(227, 10%, 10%);
  min-height: 100vh;
  min-width: 100vw;
}

.wrapper {
  display: flex;
  justify-content: space-evenly;
}

.scene {
  width: 200px;
  height: 260px;
  border: 1px solid #CCC;
  margin: 40px 0;
  perspective: 600px;
}

.card {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
}

.card.is-flipped {
  transform: rotateY(180deg);
}

.cardFace {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.cardFaceFront {
  background: red;
}

.cardFaceBack {
  background: blue;
  transform: rotateY(180deg);
}

<div class="wrapper">
  <div class="scene">
    <div class="card">
      <div class="cardFace cardFaceFront">front</div>
      <div class="cardFace cardFaceBack">back</div>
    </div>
  </div>
  <div class="scene">
    <div class="card">
      <div class="cardFace cardFaceFront">front</div>
      <div class="cardFace cardFaceBack">back</div>
    </div>
  </div>
</div>

Link to jsfiddle: https://jsfiddle.net/kapiko112/pokejcr4/

If this is a CSS and jQuery question (as you have currently tagged it), you should post your CSS and jQuery code as well. — ecg8, Mar 13 '19 at 14:16

Pranav C Balan · Accepted Answer · 2019-03-13T14:32:56.490

Get all elements using Document#querySelectorAll method, then iterate over the collection by converting the collection into an array and finally bind the event handler to each element.

function flipCard() {
  // get all elements 
  var cards = document.querySelectorAll('.card');
  // convert htmlcollection to array for iterating
  Array.from(cards)
    // iterate over elements
    .forEach(function(card) {
      // attach evenet handler
      card.addEventListener('click', function() {
        card.classList.toggle('is-flipped');
      });
    });
}

flipCard();

function flipCard() {
  // get all element 
  var cards = document.querySelectorAll('.card');
  Array.from(cards).forEach(function(card) {
    card.addEventListener('click', function() {
      card.classList.toggle('is-flipped');
    });
  });
}

body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  overflow: hidden;
  color: #fff;
  background: hsl(227, 10%, 10%);
  min-height: 100vh;
  min-width: 100vw;
}

.wrapper {
  display: flex;
  justify-content: space-evenly;
}

.scene {
  width: 200px;
  height: 260px;
  border: 1px solid #CCC;
  margin: 40px 0;
  perspective: 600px;
}

.card {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
}

.card.is-flipped {
  transform: rotateY(180deg);
}

.cardFace {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.cardFaceFront {
  background: red;
}

.cardFaceBack {
  background: blue;
  transform: rotateY(180deg);
}

<body>
  <div class="wrapper">
    <div class="scene">
      <div class="card">
        <div class="cardFace cardFaceFront">front</div>
        <div class="cardFace cardFaceBack">back</div>
      </div>
    </div>
    <div class="scene">
      <div class="card">
        <div class="cardFace cardFaceFront">front</div>
        <div class="cardFace cardFaceBack">back</div>
      </div>
    </div>
  </div>
</body>

@Excell `.forEach(function(card, i) {` ...... second argument of callback(`i`) — Pranav C Balan, Mar 14 '19 at 14:50
So I have 2 card items and if i wanted to add one different function for each card element it should look like this? : https://jsfiddle.net/kapiko112/6abmnhyt/ — Excell, Mar 14 '19 at 16:27
@Excell : misplaced closing brace(for first if condition) ... suggestion : use `else if` instead of `if`( for second one ) — Pranav C Balan, Mar 14 '19 at 17:03

How do I animate multiple elements using CSS

1 Answers1