js实现翻牌

JavaScript 实现翻牌效果

翻牌效果通常用于卡片翻转、记忆游戏等场景，通过 CSS 3D 变换和 JavaScript 事件控制实现。以下是具体实现方法：

HTML 结构

创建基础的卡片容器和正反面元素：

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

CSS 样式

设置 3D 变换和过渡效果：

.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;
  border-radius: 10px;
}

.card-front {
  background-color: #f0f0f0;
  transform: rotateY(0deg);
}

.card-back {
  background-color: #4CAF50;
  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', () => {
    card.classList.toggle('flipped');
  });
});

性能优化建议

• 使用 will-change: transform 提升动画性能
• 避免频繁的重排/重绘
• 对于移动端，考虑添加 touchstart 事件支持

兼容性处理

• 旧版浏览器需添加 -webkit- 前缀
• 检测 transform-style 支持情况
• 可回退为 2D 翻转效果

通过上述方法，可实现平滑的 3D 翻牌效果，适用于大多数现代浏览器场景。可根据实际需求调整动画时长、缓动函数或添加阴影等视觉效果增强立体感。