逐张翻转卡片 GSAP

以下是一个使用GSAP库实现逐张翻转卡片的示例代码：

HTML部分：

<div class="card">
  <div class="front">Front Content</div>
  <div class="back">Back Content</div>
</div>

CSS部分：

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

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

.front {
  background-color: #f2f2f2;
}

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

JavaScript部分：

// 引入gsap库
import { gsap } from "gsap";

// 获取卡片元素
const card = document.querySelector(".card");

// 创建动画
const flip = gsap.timeline({ paused: true })
  .to(card, { rotationY: 180, duration: 0.5 })
  .set(card, { innerHTML: "<div class='back'>Back Content</div>" })
  .to(card, { rotationY: 0, duration: 0.5 });

// 点击卡片时触发翻转动画
card.addEventListener("click", () => {
  flip.play();
});

这个示例中，我们首先使用CSS创建了一个卡片容器，包含一个前面的div和一个背面的div。通过设置透视属性，我们使得卡片能够产生3D效果。

在JavaScript部分，我们使用GSAP的gsap对象创建了一个timeline对象，用于定义逐张翻转的动画序列。在动画序列中，我们使用to()方法将卡片的rotationY属性从0度旋转到180度，然后使用set()方法更新卡片的innerHTML属性，将背面内容显示出来，最后再将rotationY属性从180度旋转回0度。

最后，我们通过addEventListener()方法给卡片元素绑定了一个click事件，当点击卡片时，触发翻转动画的播放。

请注意，示例中的代码使用了ES6的模块导入语法，如果您的项目中没有使用模块导入，请根据您的实际情况进行相应的修改。