当前位置：首页 > VUE

vue实现折纸翻页

2026-02-20 09:18:32VUE

Vue 实现折纸翻页效果

折纸翻页效果可以通过 CSS 3D 变换和 Vue 的动态数据绑定实现。以下是一个基于 Vue 3 的实现方法：

基本结构

创建一个 Vue 组件，包含两个面板（正面和背面），通过鼠标悬停或点击触发翻转动画。

<template>
  <div class="flip-container" @click="toggleFlip">
    <div class="flipper" :class="{ flipped: isFlipped }">
      <div class="front">
        <!-- 正面内容 -->
        <slot name="front"></slot>
      </div>
      <div class="back">
        <!-- 背面内容 -->
        <slot name="back"></slot>
      </div>
    </div>
  </div>
</template>

脚本部分

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

样式部分

<style scoped>
.flip-container {
  perspective: 1000px;
  width: 200px;
  height: 300px;
}

.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flipper.flipped {
  transform: rotateY(180deg);
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  box-sizing: border-box;
}

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

高级实现（带阴影和折痕效果）

更真实的折纸效果可以添加阴影和中间折痕：

vue实现折纸翻页

.flipper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: rgba(0,0,0,0.1);
  z-index: 10;
  transform: translateX(-50%);
}

.flipper {
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

使用示例

<FlipCard>
  <template #front>
    <h3>Front Content</h3>
    <p>Click to flip</p>
  </template>
  <template #back>
    <h3>Back Content</h3>
    <p>Hidden information</p>
  </template>
</FlipCard>