小程式翻牌效果

思路

父元素設定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>



複製程式碼

效果圖