当前位置：首页 > React

react实现翻书效果

2026-01-27 02:14:01React

实现翻书效果的基本思路

在React中实现翻书效果通常需要结合CSS 3D变换和动画技术。核心原理是利用transform-style: preserve-3d创建3D空间，通过旋转页面元素模拟翻页动作。

使用CSS 3D变换

创建基础页面结构，每个"页面"需要正反两面：

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

添加关键CSS样式：

.book {
  perspective: 1500px;
}

.page {
  transform-style: preserve-3d;
  position: relative;
  width: 200px;
  height: 300px;
  transition: transform 1s;
}

.page-front, .page-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.page-back {
  transform: rotateY(180deg);
}

添加翻页动画

通过状态控制旋转角度实现翻页：

function BookPage() {
  const [flipped, setFlipped] = useState(false);

  return (
    <div 
      className="page" 
      style={{ transform: flipped ? 'rotateY(180deg)' : 'rotateY(0deg)' }}
      onClick={() => setFlipped(!flipped)}
    >
      <div className="page-front">Click to flip</div>
      <div className="page-back">Back Content</div>
    </div>
  );
}

使用现有库简化实现

对于更复杂的效果，可以考虑使用专门库：

react-pageflip：专为React设计的翻书组件
```
import { PageFlip } from 'react-pageflip';
```

function Book() { return (

Page 1

Page 2

); } ```

react-turnjs：基于Turn.js的React封装


import { ReactTurn } from 'react-turnjs';

function Book() { return ( <ReactTurn options={{ width: 800, height: 600 }}>

Page 1

Page 2

); } ```

实现连续翻页效果

对于多页书籍效果，需要管理页面堆叠和z-index：

function Book() {
  const [currentPage, setCurrentPage] = useState(0);
  const pages = ['Page 1', 'Page 2', 'Page 3'];

  return (
    <div className="book">
      {pages.map((content, index) => (
        <div 
          key={index}
          className={`page ${index === currentPage ? 'active' : ''}`}
          onClick={() => setCurrentPage(index)}
        >
          {content}
        </div>
      ))}
    </div>
  );
}

配套CSS：

.book {
  position: relative;
}

.page {
  position: absolute;
  width: 200px;
  height: 300px;
  transition: transform 0.5s, z-index 0.5s;
}

.page.active {
  z-index: 10;
}

添加阴影和材质效果

增强真实感可添加阴影和渐变：

react实现翻书效果

.page {
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  background: linear-gradient(90deg, #f9f9f9 0%, #fff 20%);
}

.page:hover {
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}