h5实现书本翻页动画

实现书本翻页动画的H5技术方案

H5实现书本翻页动画可通过CSS 3D变换、JavaScript动画库或现成的插件完成。以下是三种主流实现方式：

使用CSS 3D变换

通过CSS的transform-style: preserve-3d和rotateY属性模拟翻页效果：

<div class="book">
  <div class="page">第一页内容</div>
  <div class="page">第二页内容</div>
</div>

<style>
.book {
  perspective: 1000px;
  width: 300px;
  height: 400px;
}
.page {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  border: 1px solid #ccc;
  transform-origin: left center;
  transition: transform 1s;
}
.page:hover {
  transform: rotateY(-180deg);
}
</style>

使用Turn.js插件

Turn.js是专为翻页效果设计的轻量级库：

1. 引入库文件

   <script src="https://cdnjs.cloudflare.com/ajax/libs/turn.js/4.1.1/turn.min.js"></script>

2. 初始化翻页效果

   $("#book").turn({
   width: 800,
   height: 600,
   autoCenter: true
   });

使用GSAP动画库

GreenSock动画平台可实现更复杂的3D翻页：

gsap.to(".page", {
  duration: 1,
  rotationY: -180,
  transformOrigin: "left center",
  ease: "power2.inOut"
});

移动端适配要点

• 添加touch-action样式避免手势冲突

  .book {
  touch-action: pan-y;
  }

• 使用Hammer.js处理触摸事件

  const hammer = new Hammer(document.querySelector('.book'));
  hammer.on("swipeleft", flipPage);

性能优化建议

• 启用GPU加速

  .page {
  will-change: transform;
  backface-visibility: hidden;
  }

• 对大量页面使用Canvas渲染
• 预加载下一页内容减少等待时间

完整实现需根据具体需求选择方案，CSS方案适合简单效果，Turn.js适合完整电子书，GSAP适合定制化复杂动画。