JS:如何让多张卡片在网站上翻转？

<div class="card">
  <div class="front">正面内容</div>
  <div class="back">背面内容</div>
</div>

.card {
  width: 200px;
  height: 200px;
  perspective: 1000px; /* 设置透视视角，用于实现3D效果 */
}

.front, .back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden; /* 隐藏背面内容 */
  transition: transform 0.6s; /* 添加过渡效果 */
}

.front {
  transform: rotateY(0deg); /* 初始状态为正面朝上 */
}

.back {
  transform: rotateY(180deg); /* 初始状态为背面朝上 */
}

var cards = document.querySelectorAll('.card');

cards.forEach(function(card) {
  card.addEventListener('click', function() {
    card.classList.toggle('flipped'); // 切换类名来触发翻转动画
  });
});