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

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

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

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组件）

推荐链接

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。