css3实现卡片翻转效果

效果图：

代码（主要部分注释在style里）：

<template>
  <div class="test2-container">
    <div class="re-box">
      <div class="re-item">
        <div class="re-item-front">
          <img src="../../images/1.png" alt="123" />
          <p>正面</p>
        </div>
        <div class="re-item-back">
          <img src="../../images/timg.jpg" alt="456" />
          <p>反面</p>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.test2-container {
  flex-grow: 1;
  flex-basis: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.re-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  //居中
}
.re-item {
  cursor: pointer;
  perspective: 500;
  -webkit-perspective: 500;
  //perspective 属性定义 3D 元素距视图的距离，以像素计。
  //当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
}

.re-item img {
  width: 220px;
}

.re-item-front,
.re-item-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-perspective: 1000;
  backface-visibility: hidden;
  //该属性定义当元素不面向屏幕时是否可见
  -webkit-transition: all 1.5s;
  -moz-transition: all 1.5s;
  -ms-transition: all 1.5s;
  -o-transition: all 1.5s;
  box-shadow: rgba(50, 50, 50, 0.2) 0 0 15px;
  overflow: hidden;
}

.re-item-back {
  position: relative;
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
}

.re-item:hover .re-item-front {
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
}

.re-item:hover .re-item-back {
  transform: rotateY(-360deg);
  -webkit-transform: rotateY(-360deg);
}
</style>