当前位置：首页 > JavaScript

js实现翻牌

2026-02-01 04:48:10JavaScript

翻牌效果实现方法

翻牌效果通常指卡片正反面翻转的动画交互。以下是几种常见的实现方式：

使用CSS 3D变换

HTML结构需要包含正面和反面两个元素：

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

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

js实现翻牌

.card {
  width: 200px;
  height: 300px;
  position: relative;
  perspective: 1000px;
}

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

.card-front {
  background: blue;
  transform: rotateY(0deg);
}

.card-back {
  background: red;
  transform: rotateY(180deg);
}

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

.card.flipped .card-back {
  transform: rotateY(0deg);
}

JavaScript控制翻转状态：

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

使用GSAP动画库

GSAP提供更强大的动画控制能力：

js实现翻牌

gsap.to(".card-front", {duration: 0.6, rotationY: 180});
gsap.to(".card-back", {duration: 0.6, rotationY: 0, delay: 0.3});

使用Web Animations API

现代浏览器原生支持的动画API：

const card = document.querySelector('.card');
card.animate([
  {transform: 'rotateY(0)'},
  {transform: 'rotateY(180deg)'}
], {
  duration: 600,
  fill: 'forwards'
});

性能优化建议

启用硬件加速：添加transform-style: preserve-3d
减少重绘：使用will-change: transform
对于移动端：考虑添加touch-action属性

兼容性处理

旧版浏览器需要添加前缀：-webkit-transform

检测浏览器支持情况：

if('transform' in document.body.style) {
// 支持3D变换
}

高级变体实现

实现3D翻转卡片堆：

const cards = document.querySelectorAll('.card');
cards.forEach((card, index) => {
  card.style.transform = `rotateY(${index * 5}deg) translateZ(${index * -10}px)`;
  card.addEventListener('click', () => {
    gsap.to(card, {rotationY: '+=180', duration: 0.8});
  });
});

标签: js