js实现翻牌

实现翻牌效果的步骤

HTML 结构 创建一个包含卡片的容器，每张卡片由正面和背面组成。

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

CSS 样式 设置卡片的基本样式和翻转动画效果。

.card-container {
  perspective: 1000px;
  width: 200px;
  height: 300px;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

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

.card-front {
  background-color: #f00;
}

.card-back {
  background-color: #00f;
  transform: rotateY(180deg);
}

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

JavaScript 交互 通过点击事件触发翻转效果。

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

进阶功能

多张卡片控制 为每个卡片添加独立翻转控制。

document.querySelectorAll('.card').forEach(card => {
  card.addEventListener('click', function() {
    this.classList.toggle('flipped');
  });
});

自动翻转 添加定时器实现自动翻转。

setInterval(() => {
  document.querySelector('.card').classList.toggle('flipped');
}, 1000);

3D 效果增强 调整透视和旋转角度增强立体感。

.card {
  transform: rotateY(0deg) translateZ(1px);
}
.card.flipped {
  transform: rotateY(180deg) translateZ(1px);
}

注意事项

• 确保浏览器支持 CSS 3D 变换
• 在移动设备上考虑添加触摸事件支持
• 对于复杂内容，注意背面内容的正确显示方向
• 性能优化：避免在大量卡片上同时应用动画

以上代码实现了一个基础的翻牌效果，可根据实际需求调整样式和交互方式。