css实现正反翻页效果组件

File翻转组件：

<template>
    <div>
        <div class="flip-box" :style="{ 'height': height, 'width': width }">
            <!-- 前面盒子 -->
            <div :class="{'flip-front':playFlip}"
                 class="flip-item flip-item-front">
                    <slot name="front"></slot>
            </div>
            <!-- 后面盒子 -->
            <div :class="{'flip-back':playFlip}"
                 class="flip-item flip-item-back">
               <slot name="back"></slot>
            </div>
        </div>
        <!-- 切换按钮 -->
        <div class="txtCenter">
            <div @click="play" class="more_btn">{{playFlip ? '恢复默认' : '更多'}}</div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { provide, readonly, ref } from 'vue'
const props = defineProps<{
  height: string
  width: string
}>()
const playFlip = ref(false);//是否切换
//切换
const play = () => {
    playFlip.value = !playFlip.value
}
</script>

<style scoped>
    .flip-box {
        position: relative;
    }
    .flip-item {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transition: all 1s ease-in-out 0s;
        backface-visibility: hidden;
        box-sizing: border-box;
    }
 
    .flip-item-front {
        visibility: visible;
    }
 
    .flip-item-back {
        transform: rotateY(180deg);
        visibility: hidden;
    }

    .flip-front {
        visibility: hidden;
        transform: rotateY(180deg);
    }
 
    .flip-back {
        transform: rotateY(0deg);
        visibility: visible;
    }
    .txtCenter {
        text-align: center;
    }
    .more_btn {
        position: fixed;
        bottom: 20px;
        left: 50%;
        height: 38px;
        width: 110px;
        line-height: 36px;
        background-image: linear-gradient(180deg, rgba(107,230,255,0.50) 2%, rgba(15,102,120,0.50) 100%);
        border: 1px solid #87EAFF;
        border-radius: 4px;
        color: #fff;
        text-align: center;
        background-color: transparent;
        font-size: 16px;
        transform: translate(-50%,0);
        z-index: 999;
        cursor: pointer;
    }
</style>

组件使用：

//插槽内容
 const slots = {
      front: () => <Front/>,  //前页
      back: () => <Back/>, //后页
    }
<Flip v-slots={slots} width='480px' />