Uniapp/vue 小程序CSS翻牌动画

适合于翻牌抽奖，翻牌小游戏等场景

本次案例为6张牌 css样式 以及图片请自己准备，需要准备两张图片，一张是翻开前 一张时翻开后

标签结构

<view class="drawBox flexRowCenter">
	<view class="draw-card" v-for="(item,index) of cardStateArray" @click="flip(index)">
	    <image class="front" 
               :class="item.state?'front_reverse':''" 
               :src="card_close_src" 
               mode="widthFix"></image>
		<image class="back" 
               :class="item.state?'back_reverse':''" 
               :src="awardCard" 
               mode="widthFix"></image>
	</view>
</view>

JS代码

data(){
    return{
        card_close_src:"",//翻牌前的图片路径
        awardCard:'',//中奖的卡路径
        cardStateArray:[],//牌状态数组
      }
 },

methods:{
	createState(){//初始化数组长度和状态
		this.cardStateArray=Array(6)//6张牌
		.fill(0).map((item,index)=>{
			let obj={
				state:false,
			}
			return obj
		})
		console.log('状态数组',this.cardStateArray)
	},
    flip(index){//翻牌
        写你的需求
        this.awardCard=xxx//切换中奖卡图片路径
	    this.cardStateArray[index].state=!this.cardStateArray[index].state//翻牌
        //this.createState()//可以再次初始化来实现还原
	},
}

使用动态class切换class样式，点击后切换中奖卡路径，根据索引再改变状态数组对应的牌的状态即可实现翻牌效果。目前的案例是可以多选，并能翻回来，请根据自己的需求修改。

关键的CSS样式

.draw-card{
    position: relative;
    perspective: 1000rpx;/* 设置透视投影 */

    .front,.back{
      position: absolute;
      backface-visibility: hidden;/* 隐藏背面元素 */
    }
    
    .front{
      z-index: 2;/* 设置正面元素位于背面元素之上 */
      transform: rotateY(0deg); /* 初始状态正面朝上 */
      transition: transform 0.6s ease; /* 添加过渡效果 */
      
      &_reverse{
        transform: rotateY(-180deg); /*正面翻转为背面 */
      }
    }
    
    .back{
      transform: rotateY(180deg); /* 初始状态背面朝上 */
      transition: transform 0.6s ease; /* 添加过渡效果 */
      &_reverse{
        transform: rotateY(0deg); /*背面翻转为正面 */
      }
    }
    
  }

原理是两张牌使用absolute 叠在一起 使用z-index让正面的牌放在上面，通过transform把下面的牌翻过180°，即反面。

• backface-visibility: hidden;隐藏元素的背面 以免反转过程中透视看到下面的牌
• 使用动态class切换class样式，transform:rotateY实现左右翻转，也可以rotateX上下翻转
• transition执行过渡动画
• perspective设置透视投影  实现翻牌过程中的投影效果

完整css样式（仅作参考）

//less or scss
.drawBox{
  width: 90%;
  height: 330rpx;
  margin-top: 50rpx;
  padding: 0 20rpx;
  flex-wrap:wrap;
  justify-content: space-evenly;
  
  .draw-card{
    position: relative;
    width: 130rpx;
    height: 170rpx;
    perspective: 1000rpx;/* 设置透视投影 */
    margin: 0 10rpx;
    .front,.back{
      width: 100%;
      position: absolute;
      backface-visibility: hidden;/* 隐藏背面元素 */
    }
    
    .front{
      z-index: 2;/* 设置正面元素位于背面元素之上 */
      transform: rotateY(0deg); /* 初始状态正面朝上 */
      transition: transform 0.6s ease; /* 添加过渡效果 */
      
      &_reverse{
        transform: rotateY(-180deg); /*正面翻转为背面 */
      }
    }
    
    .back{
      transform: rotateY(180deg); /* 初始状态背面朝上 */
      transition: transform 0.6s ease; /* 添加过渡效果 */
      &_reverse{
        transform: rotateY(0deg); /*背面翻转为正面 */
      }
    }
    
  }
}