CSS - 切换多个 3d 动画

Question

我正在尝试制作两张可通过切换按钮触发翻转的 3d 卡片。问题是目前只有第一张卡片按钮切换了 3d 翻转动画，而第二张卡片按钮没有。

我正在学习本教程，但他目前只使用一个 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

问题是目前只有第一张卡片按钮切换 3d 翻转动画，而第二张卡片按钮没有

不，您的代码抛出以下错误：

Uncaught TypeError: Cannot read property 'addEventListener' of null

在一个元素中多次使用相同的属性（class 在一个元素中）将简单地忽略除第一个属性之外的所有属性。

querySelector() returns only the first matched element. You have to target all the elements with class, you can do so using querySelectorAll()。然后遍历它们以将事件附加到所有它们。

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>

CSS - 切换多个 3d 动画

CSS - Toggle Multiple 3d Animations

javascript

3d

toggle

css-transforms

css-animations