当前位置：首页 > VUE

vue实现折纸翻书

2026-02-17 10:59:56VUE

实现折纸翻书效果的 Vue 方案

使用 CSS 3D 变换和过渡

通过 CSS 的 transform-style: preserve-3d 和 rotateY 实现页面翻转效果。创建两个面板元素分别代表书页的两面，通过 Vue 控制翻转状态。

<template>
  <div class="book">
    <div 
      class="page" 
      :class="{ 'flipped': isFlipped }"
      @click="isFlipped = !isFlipped"
    >
      <div class="front">正面内容</div>
      <div class="back">背面内容</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFlipped: false
    }
  }
}
</script>

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

使用第三方库（如 turn.js）

turn.js 是专门实现翻书效果的 jQuery 插件，可以在 Vue 中通过封装使用。需要先安装依赖：

npm install turn.js

封装为 Vue 组件：

<template>
  <div ref="flipbook" class="flipbook">
    <div v-for="(page, index) in pages" :key="index">
      <div class="page-content">{{ page }}</div>
    </div>
  </div>
</template>

<script>
import 'turn.js'
export default {
  props: {
    pages: Array
  },
  mounted() {
    $(this.$refs.flipbook).turn({
      width: 800,
      height: 600,
      autoCenter: true
    });
  }
}
</script>

多页连续翻页效果

实现连续翻页需要管理页面状态和动画队列：

<template>
  <div class="multi-page-book">
    <div 
      v-for="(page, index) in pages" 
      :key="index"
      class="page-layer"
      :style="{ zIndex: pages.length - index }"
    >
      <div 
        class="page"
        :class="{ 'active': currentPage === index }"
        @click="flipPage(index)"
      >
        {{ page.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 0,
      pages: [
        { content: 'Page 1' },
        { content: 'Page 2' },
        { content: 'Page 3' }
      ]
    }
  },
  methods: {
    flipPage(targetIndex) {
      if (targetIndex > this.currentPage) {
        // 向前翻页动画
      } else {
        // 向后翻页动画
      }
      this.currentPage = targetIndex;
    }
  }
}
</script>

触屏手势支持

添加 Hammer.js 实现触摸手势控制：

import Hammer from 'hammerjs';

export default {
  mounted() {
    const hammer = new Hammer(this.$el);
    hammer.on('swipeleft', () => {
      if (this.currentPage < this.pages.length - 1) {
        this.currentPage++;
      }
    });
    hammer.on('swiperight', () => {
      if (this.currentPage > 0) {
        this.currentPage--;
      }
    });
  }
}

性能优化建议

使用 will-change: transform 提升动画性能
对非当前页使用 display: none 减少渲染负担
避免过多阴影效果影响性能
考虑使用 Vue 的 <transition-group> 管理页面过渡

高级实现方案

对于更复杂的效果，可以结合 WebGL 库如 Three.js：

vue实现折纸翻书

import * as THREE from 'three';

// 创建3D场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

// 创建书页几何体
const pageGeometry = new THREE.PlaneGeometry(5, 7);
const pageMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
const page = new THREE.Mesh(pageGeometry, pageMaterial);
scene.add(page);

实现翻书效果需要根据具体需求选择合适的技术方案，从简单CSS过渡到复杂3D渲染各有适用场景。