卡片翻转效果--纯 html+css 实现
最编程
2024-03-20 19:44:06
...
话不多比,先上效果,符合要求就看,不符合要求就换!
效果:
既然符合,那么话不多比,直接上代码
<template>
<div class="card">
<!-- 卡片的翻转效果--纯html+css -->
<div class="face">
<img src="../assets/cg.jpg" style="width: 100%;height: 100%;">
</div>
<p class="back">
<span>前端小菜鸡</span>
</p>
</div>
</template>
<script>
export default {
name: 'aboutView',
components: {
}
}
</script>
<style>
.card{
width: 96px;
height: 80px;
position: relative;/*整体要相对定位*/
display: flex;
justify-content: center;
perspective: 500px;/*3d旋转效果*/
}
.face{
width: 96px;
height: 80px;
position: absolute;/*部分要绝对定位*/
backface-visibility: hidden;/*旋转到背面后隐藏*/
transition: 0.5s;/*旋转时间*/
}
.back{
size: 20px;
position: absolute;/*部分要绝对定位*/
backface-visibility: hidden;/*旋转到背面后隐藏*/
transition: 0.5s;/*旋转时间*/
transform: rotateY(180deg);/*旋转多少*/
}
.card:hover .face{/*鼠标进入后*/
transform: rotateY(-180deg);/*旋转多少*/
}
.card:hover .back{/*鼠标进入后*/
transform: rotateY(0deg);/*旋转多少*/
}
</style>
(比比一句):在做的时候,也有遇到一个问题,就是img图片再反转动画结束后会先空白,然后又闪一下,再次展示,我也不知道为啥,然后再使用一个div包裹以后,将class转移到div上边去,在给定img的宽高,就不会出现这种情况了,我也解释不了为啥,因为我是菜狗。
话不多比,到此结束,如果有哪位大佬能教一下我,为啥会出现上面那种情况,我给你磕一个!
上一篇: 翻转的卡片