小程序翻牌效果

思路

父元素设置perspective，这样他的子元素会支持3D透视效果,本身效果不变

子元素包括正面和背面两个元素，并且其子元素是相对定位，并且设置 backface-visibility:hidden,当其背对屏幕的时候隐藏 ，让其在同样的位置，并且让正面的z-index大点，优先级显示

背面的牌面设置translateY（180）

点击的样式，当点击的时候要求按照x周180度旋转

代码部分

<template>
  <view class='wrap'>
    <block wx:for="{{9}}" wx:for-item="item">
    <view class="{{flag===1?'flip_wrap change':'flip_wrap'}}" @tap.stop="change"><!-- 大容器 -->
      <view class="flip"><!--翻牌容器 -->
        <view class="side front"><!--正面 -->
          <view class="text">点我翻拍</view>
        </view>
        <view  class="side back"><!-- 背面 -->
          <view  class="text">恭喜获得优惠券</view>
          <view class="number">满99减50京东</view>
        </view>
      </view>
    </view>
    </block>
  </view>
</template>

<script>
  import wepy from 'wepy'
  export default class Index extends wepy.page {
    config = {
      enablePullDownRefresh: true,
      backgroundTextStyle: '#000',
      onReachBottomDistance: 50,
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: '翻拍',
      navigationBarTextStyle: 'black',
      navigationStyle: 'custom'
    };
    data={
      flag:2,
    };
    methods = {
      change:()=>{
        if(this.data.flag===1){
          this.flag=2;
          this.$apply()
        }else{
          this.flag=1;
          this.$apply()
        }
      }
    };

    async onLoad() {}
  }
</script>

<style lang="less">
.wrap{
  width: 750rpx;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  .flip_wrap{
    width:208rpx;
    height:208rpx;
    perspective:800rpx;
    -webkit-perspective:800rpx;
    -moz-perspective:800rpx;
    -ms-perspective:800rpx;
    -o-perspective:800rpx;
  }
  .flip{
    width:210rpx;
    height:220rpx;
    backface-visibility:hidden;/*背对屏幕时隐藏*/
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    transition: all 1s ease; /*动画*/
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transform-style: preserve-3d; /*子元素还是 3D 位置。*/
  }
  .side{
    width:100%;
    height:100%;
    position: absolute;/*重叠正面和背面的牌*/
    left:50%;
    margin-left:-105rpx;
  }
  .front{
    z-index:2;/*正面牌优先级高点*/
    background:paleturquoise;
    width:210rpx;
    height:220rpx;
    border: 1rpx solid #666;
    .text{
      width:210rpx;
      height:220rpx;
      font-size: 30rpx;
      line-height: 220rpx;
      text-align: center;
    }
  }
  .back{
    width:210rpx;
    height:220rpx;
    border: 1rpx solid #666;
    background:yellowgreen;
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);
    .text{
      text-align: center;
      font-size: 30rpx;
      width:210rpx;
      height:100rpx;
      line-height: 100rpx;
    }
    .number{
      text-align: center;
      font-size: 30rpx;
      height:120rpx;
      line-height: 120rpx;
    }
  }
  /* 点击时候旋转效果*/
  .change .flip{ 
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);
  }
    /* 被点击的部分突出显示*/
  .flip_wrap:hover .flip .back{
    background: red;
  }
  }
</style>



复制代码

效果图