如何在javascript中解决翻转卡片的问题？

<div class="card">
  <div class="card-front">Front Content</div>
  <div class="card-back">Back Content</div>
</div>

.card {
  width: 200px;
  height: 200px;
  perspective: 1000px; /* 用于定义3D空间 */
}

.card-front, .card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden; /* 隐藏背面 */
}

.card-front {
  background-color: #f00;
  transform: rotateY(0deg); /* 初始状态为正面朝上 */
}

.card-back {
  background-color: #00f;
  transform: rotateY(180deg); /* 初始状态为背面朝上 */
}

const card = document.querySelector('.card');

card.addEventListener('click', function() {
  if (card.classList.contains('is-flipped')) {
    card.classList.remove('is-flipped');
  } else {
    card.classList.add('is-flipped');
  }
});