用html，css实现卡片点击翻转

可以使用CSS3的transform属性来实现卡片的翻转效果。具体实现方法可以参考以下代码：

HTML代码：

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

CSS代码：

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

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.6s ease;
}

.front {
  background-color: #f00;
  transform: rotateY(0deg);
}

.back {
  background-color: #0f0;
  transform: rotateY(180deg);
}

.card:hover .front {
  transform: rotateY(180deg);
}

.card:hover .back {
  transform: rotateY(0deg);
}

以上代码实现了一个简单的卡片翻转效果，当鼠标悬停在卡片上时，卡片会翻转显示背面。