微信小程序实现图片翻转效果

老规矩，先上图：

页面：

<view class='rotateCtn' bindtap='rotateFn'>
  <!--正面的框  -->
  <view class='frame {{class1}}'>
    <image src="{{vo.cover1}}"></image>
  </view>
  <!--背面的框 -->
  <view class='frame {{class2}}'>
    <image src="{{vo.cover2}}"></image>
  </view>
</view>

代码：

data: {
    class1: 'z1', //默认正面在上面
    class2: 'z2'
  },


rotateFn: function(e) {
    let data = this.data;
    if (data.class1 == 'z1' && data.class2 == 'z2') {
      this.run('front', 'back', 'z2', 'z1');
    } else {
      this.run('back', 'front', 'z1', 'z2');
    }
  },

  run: function(a, b, c, d) {
    let that = this;
    that.setData({
      class1: a,
      class2: b,
    })
    setTimeout(function() {
      that.setData({
        class1: c,
        class2: d,
      })
    }, 1000);
  },

还有样式：

page{position: relative;height: 100%;background-color: #F6F6F6}

.rotateCtn{position: absolute;width: 70%;height: 70%;left: 15%;bottom: 20%;transform-style:preserve-3d;}
.frame{position: absolute;height: 100%;width: 100%;}
.frame image{height: 100%;width: 100%;border-radius: 8px;}
.front{animation:front 1s linear 1;backface-visibility: hidden;}
.back{animation:back 1s linear 1;}
@keyframes front{from{transform: rotateY(0deg);}  to{transform: rotateY(180deg);}}
@keyframes back{from{transform: rotateY(-180deg);}  to{transform: rotateY(0deg);}}
.z1{z-index:6}
.z2{z-index:5}

另外附上小程序二维码，推广一下哈：

思路来自：https://blog.csdn.net/qq_32835899/article/details/81666507