css点击翻转 卡片

好的，下面是一个简单的示例代码，用 CSS 实现点击翻转卡片的效果：

HTML：

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

CSS：

.card {
  position: relative;
  width: 300px;
  height: 200px;
  perspective: 1000px; /* 透视 */
}

.front,
.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隐藏背面 */
  transition: transform 1s; /* 变换过渡 */
}

.front {
  background-color: #f1c40f;
  transform: rotateY(0deg); /* 初始状态，正面面向前 */
}

.back {
  background-color: #2ecc71;
  transform: rotateY(180deg); /* 初始状态，背面面向后 */
}

.card:hover .front {
  transform: rotateY(-180deg); /* 鼠标悬停，正面翻转到背面 */
}

.card:hover .back {
  transform: rotateY(0deg); /* 鼠标悬停，背面翻转到正面 */
}

上面的代码实现了一个简单的点击翻转卡片的效果，当鼠标悬停在卡片上时，卡片会翻转并显示背面，再次悬停时则会回到正面。

你可以根据自己的需求，修改 CSS 样式，实现更加炫酷的效果。