css点击卡片翻转效果

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

HTML代码：

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

CSS代码：

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

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隐藏背面 */
  transition: transform 0.6s ease-in-out; /* 动画过渡效果 */
}

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

.card-back {
  background-color: #0f0;
  transform: rotateY(180deg); /* 初始状态 */
}

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

.card:hover .card-back {
  transform: rotateY(0deg); /* 鼠标悬停时翻转 */
}

这样就可以实现一个简单的卡片翻转效果了。