JavaScript实现交互式卡片堆栈：翻转与下落效果教程

<div class="card-stack">
  <div class="card">
    <div class="card-front">卡片正面</div>
    <div class="card-back">卡片背面</div>
    <div class="controls">
      <button class="fliping">翻转</button>
      <button class="delete">下落</button>
    </div>
  </div>
  <div class="card">
    <div class="card-front">另一张卡片正面</div>
    <div class="card-back">另一张卡片背面</div>
    <div class="controls">
      <button class="fliping">翻转</button>
      <button class="delete">下落</button>
    </div>
  </div>
  <!-- 更多卡片... -->
</div>

.card {
  /* 基础卡片样式 */
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.card.flipcard {
  transform: rotateY(180deg); /* 翻转效果 */
}

.card.fall {
  /* 下落效果，例如： */
  animation: fall-animation 0.8s forwards;
  opacity: 0;
  transform: translateY(200px) rotateZ(15deg);
}

@keyframes fall-animation {
  0% {
    opacity: 1;
    transform: translateY(0) rotateZ(0);
  }
  100% {
    opacity: 0;
    transform: translateY(200px) rotateZ(15deg);
  }
}
/* card-front, card-back 样式以实现3D翻转 */

// 1. 获取所有相关的DOM元素
const cards = document.querySelectorAll(".card"); // 所有卡片元素
const flipBtns = document.querySelectorAll('.fliping'); // 所有翻转按钮
const deleteBtns = document.querySelectorAll('.delete'); // 所有下落按钮

// 2. 为每个翻转按钮添加事件监听器
flipBtns.forEach(function(flipBtn) {
  flipBtn.addEventListener('click', function() {
    // 获取当前被点击按钮最近的父级 .card 元素
    const card = this.closest('.card');
    // 对该特定卡片切换 'flipcard' 类
    if (card) { // 确保找到了卡片
      card.classList.toggle('flipcard');
    }
  });
});

// 3. 为每个下落按钮添加事件监听器
deleteBtns.forEach(function(deleteBtn) {
  deleteBtn.addEventListener('click', function() {
    // 获取当前被点击按钮最近的父级 .card 元素
    const card = this.closest('.card');
    // 对该特定卡片添加 'fall' 类
    if (card) { // 确保找到了卡片
      card.classList.add('fall');
      // 可选：在动画结束后移除卡片，例如：
      card.addEventListener('animationend', function() {
        card.remove(); // 动画结束后从DOM中移除卡片
      }, { once: true }); // 只执行一次事件监听
    }
  });
});