为每张要翻转的卡片添加一个按钮

<div class="card">
  <div class="card-content">
    <!-- 卡片正面内容 -->
  </div>
  <div class="card-content back">
    <!-- 卡片背面内容 -->
  </div>
  <button class="flip-button">翻转</button>
</div>

.card {
  width: 200px;
  height: 200px;
  perspective: 1000px;
}

const flipButton = document.querySelector('.flip-button');
const card = document.querySelector('.card');

flipButton.addEventListener('click', function() {
  card.classList.toggle('flipped');
});

.card-content {
  /* 卡片正面样式 */
}

.card-content.back {
  /* 卡片背面样式 */
  transform: rotateY(180deg);
}

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

.card.flipped .card-content.back {
  transform: rotateY(0deg);
}