使用CSS实现响应式卡片翻转布局的技巧

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

.container {
  perspective: 1000px;  
}

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

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

.front {
  z-index: 2;  
}

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

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

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

document.querySelector('.container').addEventListener('click', function() {
  this.classList.toggle('active');  
});

@media (max-width: 600px) {
  .card {
    width: 150px;  
    height: 150px;  
  }
}