CSS - Toggle Multiple 3d Animations

Question

I'm trying to have two 3d cards that trigger a flip with a toggle button. The problem is only the first cards button currently toggle's the 3d flipping animation, whereas the second cards button doesn't.

I'm following this tutorial, but he currently only uses one https://3dtransforms.desandro.com/card-flip

let flip = document.querySelector('.flip');
let card = document.querySelector('.card');

flip.addEventListener('click', function() {
  card.classList.toggle('is-flipped');
});

/*The 3d Area Boundary*/

.container {
  box-sizing: border-box;
  width: 100%;
  height: 170px;
  padding: 0;
  perspective: 800px;
}


/*The 3d Object - Flipping Card */

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


/*Sets Card face 2d, absolute and invisible
when until flipped*/

.card-face {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}

.front-card {}

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

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

<div class="container">
  <div class="card">
    <div class="card-face front-card">
      <p>Some Text.</p>
      <a class="uk-button uk-button-default" class="flip">Flip</a>
    </div>
    <div class="card-face back-card">
      <p>Some MORE TEXT.</p>
      <a class="uk-button uk-button-default" class="flip">Flip</a>
    </div>
  </div>
</div>

Answer 1

The problem is only the first cards button currently toggle's the 3d flipping animation, whereas the second cards button doesn't

No, your code is throwing the following error:

Uncaught TypeError: Cannot read property 'addEventListener' of null

Having same attribute multiple times in an elements (class in a element) will simply ignored all the attributes except the first one.

querySelector() returns only the first matched element. You have to target all the elements with class, you can do so using querySelectorAll(). Then loop through them to attach the event to all of them.

let flip = document.querySelectorAll('.flip');
let card = document.querySelector('.card');

flip.forEach(function(el){
  el.addEventListener('click', function() {
    card.classList.toggle('is-flipped');
  });
});

/*The 3d Area Boundary*/

.container {
  box-sizing: border-box;
  width: 100%;
  height: 170px;
  padding: 0;
  perspective: 800px;
}


/*The 3d Object - Flipping Card */

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


/*Sets Card face 2d, absolute and invisible
when until flipped*/

.card-face {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}

.front-card {}

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

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

<div class="container">
  <div class="card">
    <div class="card-face front-card">
      <p>Some Text.</p>
      <a class="uk-button uk-button-default flip">Flip</a>
    </div>
    <div class="card-face back-card">
      <p>Some MORE TEXT.</p>
      <a class="uk-button uk-button-default flip" >Flip</a>
    </div>
  </div>
</div>