使用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;  /* 设置卡片保持 3D 效果 */  transition: transform 0.8s;  /* 设置卡片翻转时的过渡动画 */}.front, .back {  position: absolute;  width: 100%;  /* 设置正面和背面填充满卡片 */  height: 100%;  backface-visibility: hidden;  /* 隐藏背面内容 */}.front {  z-index: 2;  /* 设置正面在背面之上显示 */}.back {  transform: rotateY(180deg);  /* 背面翻转180° */}

.container:hover .card {  transform: rotateY(180deg);  /* 当鼠标悬停在容器上时，卡片翻转180° */}.container.active .card {  transform: rotateY(180deg);  /* 当容器拥有 active 类时，卡片翻转180° */}

document.querySelector('.container').addEventListener('click', function() {  this.classList.toggle('active');  /* 切换 active 类的状态 */});

@media (max-width: 600px) {  .card {    width: 150px;  /* 在屏幕宽度小于 600px 时，设置卡片宽度为 150px */    height: 150px;  /* 在屏幕宽度小于 600px 时，设置卡片高度为 150px */  }}