3d动画翻转

+先看效果

<view class="mask">
  <view class="parent">
    <view class="face">点击翻看</view>
    <view class="back">恭喜您，中奖啦!</view>
  </view>
</view>

.mask {
  border: 2rpx solid red;
  display: flex;
  align-items: center;
  perspective: 220rpx;//景深
  position:absolute;
  width:100%;
  height: 100%;
  left:0;
  top:0;
  box-sizing: border-box;
}
.parent:hover{
  transform:rotateY(180deg);//最终状态
}
.parent {//起始状态
  width: 140rpx;
  height: 200rpx;
  border: 2rpx solid #ccc;
  margin: 0 auto;
  transform-style: preserve-3d;//注意点
  transform:rotateY(0deg);//注意点
  transition:all 1s;//注意点
}
.face{
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility:hidden;//当在背面时就隐藏
}
.back {
  transform: rotateY(180deg);
  backface-visibility:hidden;//当在背面时就隐藏
  display: flex;
  justify-content: center;
  align-items: center;
}

• 本案例中，face和back是固定在parent上的，3d动画过程其实是作用在parent上