如何使用输入框通过css点击事件翻转卡片？

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

.card-container {
  perspective: 1000px; /* 设置透视视角 */
}

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

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

const input = document.querySelector('input');
const cardContainer = document.querySelector('.card-container');

input.addEventListener('click', function() {
  cardContainer.classList.toggle('flipped');
});

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

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