如何复刻带差异化背面的Div垂直3D翻转（悬停/滚动触发）效果？

问题描述 #

想要复刻目标网站的交互效果：网格内的Div需实现三个核心交互：

1. 鼠标悬停时单个卡片垂直翻转
2. 页面滚动时所有卡片同步翻转
3. 翻转回位时带有类似Framer Spring的柔缓弹性效果
   同时需要实现卡片背面的差异化连续内容，当前用CSS实现了基础翻转，但无法满足上述完整需求，也不确定原效果是切换Div还是真3D翻转。

当前实现代码 #

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
}

.flip-card {
  width: 200px;
  height: 120px;
  perspective: 1000px;
  cursor: pointer;
}

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

.flip-card:hover .flip-card-inner {
  transform: rotateX(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.flip-card-front {
  background-color: dodgerblue;
  color: white;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateX(180deg);
}

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <p>Front</p>
    </div>
    <div class="flip-card-back">
      <p>Back</p>
    </div>
  </div>
</div>

完整复刻方案 #

1. 结构设计：真3D翻转+差异化内容 #

原效果是真3D翻转，通过CSS 3D变换实现，背面内容可完全独立定制：

• 保留现有.flip-card-inner的3D结构，为每个卡片的.flip-card-back填充差异化内容（如不同文字、图片）
• 用CSS Grid实现网格布局，将卡片排列成所需行列

2. 悬停单个翻转：优化弹性过渡 #

替换原有线性过渡为弹性曲线，模拟Spring效果：

.flip-card-inner {
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* 自定义弹性曲线 */
}

3. 滚动全局翻转：JS监听滚动触发 #

通过JavaScript监听滚动位置，控制所有卡片的翻转状态：

let scrollTriggered = false;
const cardInners = document.querySelectorAll('.flip-card-inner');

window.addEventListener('scroll', () => {
  const scrollTop = window.scrollY;
  // 设定滚动阈值，比如滚动超过200px时触发全局翻转
  if (scrollTop > 200 && !scrollTriggered) {
    cardInners.forEach(inner => inner.style.transform = 'rotateX(180deg)');
    scrollTriggered = true;
  } else if (scrollTop <= 200 && scrollTriggered) {
    cardInners.forEach(inner => inner.style.transform = 'rotateX(0deg)');
    scrollTriggered = false;
  }
});

4. 柔缓弹簧效果：用动画库增强 #

若要更接近Framer Spring的细腻效果，推荐使用gsap或framer-motion（无需依赖Three.js）：

// 悬停单个翻转（GSAP版本）
document.querySelectorAll('.flip-card').forEach(card => {
  card.addEventListener('mouseenter', () => {
    gsap.to(card.querySelector('.flip-card-inner'), {
      rotateX: 180,
      duration: 0.6,
      ease: 'elastic.out(1, 0.5)'
    });
  });
  card.addEventListener('mouseleave', () => {
    gsap.to(card.querySelector('.flip-card-inner'), {
      rotateX: 0,
      duration: 0.6,
      ease: 'elastic.out(1, 0.5)'
    });
  });
});

// 滚动全局翻转（GSAP版本）
window.addEventListener('scroll', () => {
  const scrollTop = window.scrollY;
  if (scrollTop > 200 && !scrollTriggered) {
    gsap.to(cardInners, {
      rotateX: 180,
      duration: 0.8,
      ease: 'elastic.out(1, 0.4)'
    });
    scrollTriggered = true;
  } else if (scrollTop <= 200 && scrollTriggered) {
    gsap.to(cardInners, {
      rotateX: 0,
      duration: 0.8,
      ease: 'elastic.out(1, 0.4)'
    });
    scrollTriggered = false;
  }
});

5. 网格布局实现 #

添加网格容器并调整页面布局：

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

body {
  display: block; /* 移除原有flex居中，改为流式布局 */
  min-height: 200vh; /* 让页面支持滚动 */
  margin: 0;
  font-family: Arial, sans-serif;
}

修改HTML结构为网格布局：

<div class="card-grid">
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <p>Card 1 Front</p>
      </div>
      <div class="flip-card-back">
        <p>Card 1 Back: 专属内容</p>
      </div>
    </div>
  </div>
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <p>Card 2 Front</p>
      </div>
      <div class="flip-card-back">
        <p>Card 2 Back: 差异化文本</p>
      </div>
    </div>
  </div>
  <!-- 更多卡片可按需添加 -->
</div>

关于Three.js的说明 #

原网站使用Three.js大概率是用于其他3D效果，该卡片翻转模块完全不需要依赖Three.js，通过CSS+JS或动画库即可实现1:1的交互效果。

内容的提问来源于stack exchange，提问作者Lancer26