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

1.实现效果

2.实现代码

// pages/subPack/roateY180/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
  },
  showb1() {
    this.setData({
      styleA: 'transform:rotateY(180deg)',
      styleB: 'transform:rotateY(0deg)'
    })
  },
  showb2() {
    this.setData({
      styleA: 'transform:rotateY(0deg)',
      styleB: 'transform:rotateY(-180deg)'
    })
  }

})

<view class="main">
  <view class="box b1" catchtap="showb1" style="{{styleA}}"></view>
  <view class="box b2" catchtap="showb2" style="{{styleB}}"></view>
</view>

/* pages/subPack/roateY180/index.wxss */
.main {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  perspective:1500;
  -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;
  overflow: hidden;
}

.b1 {
  background: skyblue;
}

.b2 {
  background: rgb(226, 66, 37);
  transform: rotateY(-180deg);
}

3.写在最后🍒

看完本文如果觉得对你有一丢丢帮助，记得点赞+关注+收藏鸭 🍕

更多相关内容，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~