实现卡牌反转效果（简单）

效果如图

<div class="reverseLeft reverse" >
        <groundOrderAmount class="pageContent" :class="ifShow ? 'screen-left' : 'screen-right'" ></groundOrderAmount>
        <groundOrderProportion class="pageContent" :class="!ifShow ? 'screen-left' : 'screen-right'" :show="ifShow"></groundOrderProportion>
      </div>

一个大的div包裹2个组件
在data给ifShow赋值1

mounted(){
  this.flip()
},
methods:{
  flip(){
    let num = 1;
    setInterval(() => {
      if(num%2 == 0){
       this.ifShow = 1

      }else{
        this.ifShow = null
      }
        num++;
    }, 5000);
  
  }
}

然后写一个方法 ifShow为1的时候一个子组件反转 为Null时另一个反转
scss中:

.reverse{
    position: relative;
    flex:1;
    transform-style: preserve-3d; 
}
.pageContent{ 
        overflow: hidden;
        display: block;
        position: absolute; 
        transition: all 0.6s linear;
        backface-visibility: hidden;  
}

.screen-left{
    transform:  rotate(0);
}

.screen-right {
    transform:  rotateY(180deg);
}

这里我们要注意 transform-style: preserve-3d;
如果没有这个echarts图标在背对的时候也是会显示的。

来源：CSDN

作者：zyj12138

链接：https://blog.csdn.net/zyj12138/article/details/103786759