当前位置：首页 > VUE

vue实现仿真翻书

2026-01-15 05:23:48VUE

Vue实现仿真翻书效果

实现仿真翻书效果需要结合CSS 3D变换和JavaScript交互逻辑。以下是几种常见实现方式：

使用CSS 3D变换基础版

创建书页元素并应用3D变换：

<template>
  <div class="book">
    <div class="page" :style="pageStyle" @click="flipPage"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFlipped: false
    }
  },
  computed: {
    pageStyle() {
      return {
        transform: this.isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
        'transform-style': 'preserve-3d',
        transition: 'transform 1s ease'
      }
    }
  },
  methods: {
    flipPage() {
      this.isFlipped = !this.isFlipped
    }
  }
}
</script>

<style>
.book {
  perspective: 1000px;
  width: 200px;
  height: 300px;
}
.page {
  width: 100%;
  height: 100%;
  background: white;
  position: relative;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
</style>

使用第三方库（turn.js）

turn.js是专门实现翻书效果的库：

npm install turn.js

组件实现：

<template>
  <div ref="flipbook" class="flipbook"></div>
</template>

<script>
import 'turn.js'

export default {
  mounted() {
    $(this.$refs.flipbook).turn({
      width: 800,
      height: 600,
      autoCenter: true
    })
  }
}
</script>

<style>
.flipbook {
  width: 800px;
  height: 600px;
}
.page {
  background: white;
  color: #333;
}
</style>

高级手写实现

完整的手写翻书组件需要考虑多点触控和物理效果：

<template>
  <div class="book-container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
    <div class="page front" :style="frontStyle"></div>
    <div class="page back" :style="backStyle"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      touchStartX: 0,
      currentAngle: 0
    }
  },
  computed: {
    frontStyle() {
      return {
        transform: `rotateY(${this.currentAngle}deg)`,
        'z-index': this.currentAngle > 90 ? 0 : 1
      }
    },
    backStyle() {
      return {
        transform: `rotateY(${this.currentAngle - 180}deg)`
      }
    }
  },
  methods: {
    onTouchStart(e) {
      this.touchStartX = e.touches[0].clientX
    },
    onTouchMove(e) {
      const deltaX = e.touches[0].clientX - this.touchStartX
      this.currentAngle = Math.min(180, Math.max(0, deltaX / 2))
    },
    onTouchEnd() {
      if (this.currentAngle > 90) {
        this.currentAngle = 180
      } else {
        this.currentAngle = 0
      }
    }
  }
}
</script>

<style>
.book-container {
  perspective: 1000px;
  width: 300px;
  height: 400px;
  position: relative;
}
.page {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transition: transform 0.5s ease;
  backface-visibility: hidden;
  background: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.front {
  background: #f5f5f5;
}
.back {
  background: #eaeaea;
}
</style>