当前位置：首页 > VUE

vue实现折纸翻书

2026-03-29 10:35:31VUE

vue实现折纸翻书效果

要实现类似折纸翻书的动画效果，可以使用CSS 3D变换结合Vue的过渡系统。以下是实现方案：

基础3D翻页结构

在Vue组件模板中创建翻书容器和页面元素：

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

核心CSS样式

通过CSS实现3D变换和过渡效果：

.book-container {
  perspective: 1000px;
  width: 300px;
  height: 400px;
  position: relative;
}

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  border: 1px solid #ddd;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  transform-style: preserve-3d;
  transition: transform 1s;
  transform-origin: left center;
}

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

Vue组件逻辑

处理页面状态和动画触发：

export default {
  data() {
    return {
      currentPage: 0,
      pages: [
        { content: 'Page 1' },
        { content: 'Page 2' },
        { content: 'Page 3' }
      ]
    }
  },
  methods: {
    flipPage(index) {
      if (index !== this.currentPage) {
        this.currentPage = index;
      }
    }
  }
}

进阶实现方案

更真实的翻书效果可以结合GSAP动画库：

import gsap from 'gsap';

methods: {
  flipPage(index) {
    const page = this.$el.querySelectorAll('.page')[index];
    gsap.to(page, {
      duration: 1,
      rotateY: -180,
      ease: "power2.inOut"
    });
  }
}

双面页面实现

为页面添加正反面内容：

vue实现折纸翻书

<div class="page" v-for="(page, index) in pages" :key="index">
  <div class="front">{{ page.front }}</div>
  <div class="back">{{ page.back }}</div>
</div>

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

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

以上方案可根据实际需求调整动画时长、缓动函数和3D效果强度。对于更复杂的场景，可以考虑使用专门的翻书效果库如turn.js或leaflet。