如何创建仅使用CSS的响应式翻转卡片？

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

.card {
  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); /* 初始状态为背面朝上 */
}

.card:hover .front {
  transform: rotateY(-180deg); /* 鼠标悬停时翻转至背面朝上 */
}

.card:hover .back {
  transform: rotateY(0deg); /* 鼠标悬停时翻转至正面朝上 */
}

.front {
  background-color: #f1f1f1;
  color: #333;
}

.back {
  background-color: #333;
  color: #fff;
}