微信小程序：图片翻转特效

逻辑：

1. 两张图片，一张反面-B面，一张正面-A面；
2. B面动画：B面翻转一定角度，翻转一定时长，翻转后隐藏B面
3. A面动画：间隔B面动画时长，A面翻转一定角度、翻转一定时长

page.wxss

/**
图片翻转CSS
参考：https://www.jb51.net/article/170440.htm
**/

.front {
  animation: front 0.5s linear 1;
  backface-visibility: hidden;
}

.back {
  animation: back 0.5s linear 1;
}

@keyframes front {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(90deg);
  }
}

@keyframes back {
  from {
    transform: rotateY(-90deg);
  }

  to {
    transform: rotateY(0deg);
  }
}

page.wxml

      <!--默认显示背景图-->
      <view wx:if="{{status==0}}" class="imageWrap {{turnover?front:''}}">
        <image src="{{bgImg}}" mode="widthFix" bindtap="turnover" data-idx="{{Idx}}"></image>
      </view>
      <!--显示编码图片-->
      <view wx:elif="{{status==1}}" class="imageWrap {{turnover?back:''}}">
        <image src="{{col.image}}" mode="widthFix"></image>
      </view>