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属性值改变景深
