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

苏苏哇哈哈

已于 2022-11-19 15:35:50 修改

阅读量2.5k

点赞数 5

分类专栏： git 文章标签：微信小程序 css3 小程序

于 2021-11-12 01:14:40 首次发布

本文链接：https://blog.csdn.net/qq_48085286/article/details/121279937

版权

git 专栏收录该内容

47 篇文章

订阅专栏

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);
}