如何使用Vue实现卡片翻转效果

如何使用Vue实现一个卡片翻转效果？

1、整体思路：整体的实现思路就是先把页面元素布局好，然后设置翻转动画，以及借助Vue的动态样式绑定来改变样式

2、页面布局：使用Flex布局和定位实现卡片正面和反面相重叠
代码如下：

<template>
  <div id = "rollBox" :class = "{'box_Rolling': isRolling}" @click= "changeRolling">
    <div class = "rollFront">
        <div id = "frontContent">
            <el-card  shadow="hover" :body-style="{ padding: '20px' }">
            <template #header>
            <div>
                <span><!-- card title -->
                登录</span>
            </div>
            </template>
            <!-- card body -->
        </el-card>
        </div>
    </div>
    <div class = "rollBehind">
        <div id = "behindContent">
            <el-card  shadow="hover" :body-style="{ padding: '20px' }">
            <template #header>
            <div>
                <span><!-- card title -->
                注册</span>
            </div>
            </template>
            <!-- card body -->
        </el-card>
        </div>
    </div>
  </div>
</template>

CSS代码：

#rollBox {
        width: 200px;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        perspective: 1000;

        .rollFront, .rollBehind {
            // 元素背对时默认不可见
            backface-visibility: hidden;
            // 元素在3D空间中呈现
            transform-style: preserve-3d;
            // 两秒完成动画
            transition-duration: 0.5s;
            // 过渡效果-ease-in先慢后快
            transition-timing-function: ease-in;
            width: 200px;
            height: 200px;
            
        }

        //背面元素默认不可见
        .rollBehind{
            transform: rotateY(180deg);
            visibility: hidden;
            position: absolute;
        }


    }
    .box_Rolling {
        .rollFront {
            transform: rotateY(180deg);
            visibility: hidden;
        }
        .rollBehind {
            transform: rotateY(360deg) !important;
            visibility: visible !important;
        }
    }

3、在Vue中，我们定义点击事件以及通过属性绑定动态样式，来激活以及移除box_Rolling，同时用到了一些CSS属性：
backface-visibility: hidden; 元素背对屏幕时不可见，使用这个属性做到了卡片不属于正面即不显示，很好地移除掉了我们不需要的效果；
transition-timing-function: ease-in; 一个过渡动画的样式，表现为先慢后快，很适合用来做卡片翻转；
perspective: 1000; 这个属性是指元素离我们z轴观察者的距离为多远，如果设置为0，则有一种快溢出屏幕的效果，各位可以自己试一试；

最终效果：（这里我还使用了Card组件）