卡片的翻转效果--纯html+css实现

话不多比，先上效果，符合要求就看，不符合要求就换！

效果：

既然符合，那么话不多比，直接上代码

<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的宽高，就不会出现这种情况了，我也解释不了为啥，因为我是菜狗。

话不多比，到此结束，如果有哪位大佬能教一下我，为啥会出现上面那种情况，我给你磕一个！