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 翻牌效果，适用于大多数现代浏览器场景。可根据实际需求调整动画时长、缓动函数或添加阴影等视觉效果增强立体感。
