使用CSS实现卡片翻转效果的技巧

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

.card-container {
  perspective: 1000px;  
}

.card {
  position: relative;
  width: 200px;
  height: 300px;
  transfORM-style: preserve-3D;  
  transition: transform 0.5s;  
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;  
}

.card-front {
  transform: rotateY(0deg);  
}

.card-back {
  transform: rotateY(180deg);  
}

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

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

var card = document.querySelector('.card');
card.addEventListener('click', function() {
  card.classList.toggle('active');  
});