当前位置：首页 > VUE

vue实现折纸翻书

2026-01-16 18:23:57VUE

Vue 实现折纸翻书效果

折纸翻书效果是一种模拟真实书本翻页的交互效果，可以通过 Vue 结合 CSS 动画和 JavaScript 实现。以下是具体实现方法：

使用 CSS 3D 变换和过渡

通过 CSS 的 transform 和 transition 属性实现翻页的 3D 效果。

<template>
  <div class="book">
    <div class="page" :class="{ 'flipped': isFlipped }" @click="flipPage">
      <div class="front">Front Content</div>
      <div class="back">Back Content</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFlipped: false
    };
  },
  methods: {
    flipPage() {
      this.isFlipped = !this.isFlipped;
    }
  }
};
</script>

<style>
.book {
  perspective: 1000px;
  width: 200px;
  height: 300px;
}

.page {
  width: 100%;
  height: 100%;
  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;
}

.front {
  background: #f0f0f0;
}

.back {
  background: #e0e0e0;
  transform: rotateY(180deg);
}
</style>

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

turn.js 是一个专门用于实现翻书效果的 JavaScript 库，可以轻松集成到 Vue 中。

安装 turn.js：
```
npm install turn.js
```

在 Vue 组件中使用：


<template>
<div ref="book" class="book">
 <div class="page">Page 1</div>
 <div class="page">Page 2</div>
</div>
</template>

import 'turn.js'; export default { mounted() { $(this.$refs.book).turn({ width: 800, height: 600, autoCenter: true }); } }; .book { width: 800px; height: 600px; } .page { background: #f0f0f0; padding: 20px; } ```

自定义翻页动画

如果需要更复杂的动画效果，可以结合 Vue 的过渡系统和 GSAP 动画库。

安装 GSAP：
```
npm install gsap
```

实现自定义动画：

vue实现折纸翻书


<template>
<div class="book">
 <div class="page" ref="page">
   <div class="content">{{ currentContent }}</div>
 </div>
 <button @click="flip">Flip Page</button>
</div>
</template>

import { gsap } from 'gsap'; export default { data() { return { currentContent: 'Front Content', isFlipped: false }; }, methods: { flip() { const page = this.$refs.page; if (!this.isFlipped) { gsap.to(page, { rotationY: 180, duration: 1, onComplete: () => { this.currentContent = 'Back Content'; } }); } else { gsap.to(page, { rotationY: 0, duration: 1, onComplete: () => { this.currentContent = 'Front Content'; } }); } this.isFlipped = !this.isFlipped; } } }; .book { perspective: 1000px; } .page { width: 200px; height: 300px; background: #f0f0f0; transform-style: preserve-3d; } .content { padding: 20px; } ```

注意事项

确保为翻页元素设置 transform-style: preserve-3d 以保持 3D 效果。
使用 backface-visibility: hidden 隐藏背面内容，避免渲染异常。
对于复杂场景，优先考虑使用 turn.js 或类似的库以节省开发时间。

以上方法可以根据实际需求调整，实现从简单到复杂的翻书效果。

标签: 翻书 vue

分享给朋友：

vue实现折纸翻书