微信小程序实现点击卡片 翻转效果

<view class='main'>  <!--正面的框 -->  <view class="box b1" animation="{{animationMain}}" bindtap='rotateFn' data-id="1" >   <image src=""></image>  </view>  <!--背面的框 -->  <view class="box b2" animation="{{animationBack}}" bindtap='rotateFn' data-id="2">   <image src=""></image>  </view></view>

.main { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; transform: translate(-50%,-50%); -webkit-perspective: 1500;//子元素获得透视效果  -moz-perspective: 1500;} .box { position: absolute; top: 0; left: 0; width: 300px; height: 300px; transition: all 1s; backface-visibility: hidden; border-radius: 10px; cursor: pointer;}.box image{ border-radius: 10px; width: 100%; height: 100%;}.b1{ background:skyblue;}.b2 { background:tomato; transform: rotateY(-180deg);}js: Page({ data: {  animationMain:null,//正面  animationBack:null,//背面 }, rotateFn(e) {  var id = e.currentTarget.dataset.id  this.animation_main = wx.createAnimation({    duration:400,    timingFunction:'linear'   })   this.animation_back = wx.createAnimation({    duration:400,    timingFunction:'linear'   })  // 点击正面   if (id==1) {   this.animation_main.rotateY(180).step()   this.animation_back.rotateY(0).step()   this.setData({    animationMain: this.animation_main.export(),    animationBack: this.animation_back.export(),   })  }  // 点击背面  else{   this.animation_main.rotateY(0).step()   this.animation_back.rotateY(-180).step()   this.setData({    animationMain: this.animation_main.export(),    animationBack: this.animation_back.export(),   })  } },})