当前位置：首页 > JavaScript

js实现翻书动画

2026-02-03 02:46:01JavaScript

实现翻书动画的基本思路

翻书动画可以通过CSS 3D变换和JavaScript事件监听实现。核心是利用transform属性模拟书页翻转的立体效果，结合鼠标或触摸事件控制动画进度。

创建HTML结构

需要准备一个包含书页的容器，每页分为正面和背面：

<div class="book">
  <div class="page">
    <div class="page-front">Front Content</div>
    <div class="page-back">Back Content</div>
  </div>
</div>

添加CSS样式

设置3D变换环境和页面样式：

.book {
  perspective: 1000px;
  width: 300px;
  height: 400px;
}
.page {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}
.page-front, .page-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.page-back {
  transform: rotateY(180deg);
}

JavaScript控制逻辑

通过事件监听实现交互控制：

const page = document.querySelector('.page');
let isFlipped = false;

page.addEventListener('click', () => {
  isFlipped = !isFlipped;
  page.style.transform = isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)';
});

进阶实现方案

对于更复杂的多页翻书效果，可以结合CSS变量和JavaScript动态控制：

class BookAnimation {
  constructor(container) {
    this.pages = Array.from(container.querySelectorAll('.page'));
    this.currentPage = 0;
    this.setupEvents();
  }

  setupEvents() {
    this.pages.forEach((page, index) => {
      page.addEventListener('click', () => this.flipPage(index));
    });
  }

  flipPage(index) {
    const angle = index < this.currentPage ? 0 : 180;
    this.pages[index].style.transform = `rotateY(${angle}deg)`;
    this.currentPage = index;
  }
}

性能优化建议

使用will-change属性预通知浏览器可能发生的变换：

.page {
  will-change: transform;
}

考虑使用requestAnimationFrame优化动画流畅度：

function animateFlip(progress) {
  const angle = progress * 180;
  page.style.transform = `rotateY(${angle}deg)`;
  if (progress < 1) {
    requestAnimationFrame(() => animateFlip(progress + 0.01));
  }
}

兼容性处理

为不支持3D变换的浏览器提供降级方案：

if (!CSS.supports('transform-style', 'preserve-3d')) {
  document.body.classList.add('no-3d');
  // 使用2D翻转替代方案
}

触摸设备支持

添加触摸事件处理实现移动端兼容：

page.addEventListener('touchstart', handleTouchStart);
page.addEventListener('touchmove', handleTouchMove);

function handleTouchMove(e) {
  // 根据触摸位移计算翻转角度
}

以上方案可根据实际需求调整参数和交互细节，实现从简单到复杂的各种翻书动画效果。

js实现翻书动画