js实现翻拍

实现翻牌效果的方法

翻牌效果通常指卡片翻转动画，常用于展示正反面内容交互。以下是几种实现方式：

使用CSS 3D变换配合JavaScript触发 通过CSS定义卡片容器和正反面样式，JavaScript控制翻转状态切换：

<div class="card" onclick="this.classList.toggle('flipped')">
  <div class="card-front">正面内容</div>
  <div class="card-back">背面内容</div>
</div>

<style>
.card {
  width: 200px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
.card.flipped {
  transform: rotateY(180deg);
}
.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.card-back {
  transform: rotateY(180deg);
}
</style>

使用GSAP实现高级动画 引入GSAP库可实现更复杂的翻牌轨迹：

import { gsap } from "gsap";

function flipCard(card) {
  gsap.to(card, {
    rotationY: 180,
    duration: 0.8,
    ease: "power2.inOut"
  });
}

React组件实现 在React中可创建可复用的翻牌组件：

function FlipCard({ front, back }) {
  const [isFlipped, setIsFlipped] = useState(false);

  return (
    <div 
      className={`flip-card ${isFlipped ? 'flipped' : ''}`}
      onClick={() => setIsFlipped(!isFlipped)}
    >
      <div className="flip-card-inner">
        <div className="flip-card-front">{front}</div>
        <div className="flip-card-back">{back}</div>
      </div>
    </div>
  );
}

性能优化建议

• 启用硬件加速：添加transform: translateZ(0)
• 减少重绘：使用will-change: transform
• 移动端适配：添加-webkit-transform-style: preserve-3d

浏览器兼容方案

对于不支持3D变换的旧浏览器，可降级为2D翻转效果：

@supports not (transform-style: preserve-3d) {
  .card {
    transform: rotateY(0);
  }
  .card.flipped {
    transform: rotateY(180deg);
  }
}

高级交互扩展

• 添加拖拽翻转：结合Hammer.js实现手势控制
• 连续翻转：通过JavaScript队列管理多个卡片动画
• 3D透视效果：调整perspective属性值改变景深