html + css3 + js点击按钮对卡片进行翻转

// An highlighted block
<div class="loginTitle">
   <h2 @click="accountLoginKeys(true)">正反</h2>
   <h2 @click="accountLoginKeys(false)">反正</h2>
</div>

<div id="accountKeysLogin">
  <div class="accountKeys account">
  正
   </div>
   <div class="accountKeys keys">
   反
   </div>
 </div>

methods: {
    accountLoginKeys(val){
    //this.loginBox为布尔值true,false
      this.loginBox = val;
      if(this.loginBox){//卡片正=>反转
        document.getElementById('accountKeysLogin').querySelector('.keys').style.transform = 'rotateY(-180deg)'
        document.getElementById('accountKeysLogin').querySelector('.account').style.transform = 'rotateY(0)'
      }else{//卡片反=>正转
        document.getElementById('accountKeysLogin').querySelector('.keys').style.transform = 'rotateY(0deg)';
        document.getElementById('accountKeysLogin').querySelector('.account').style.transform = 'rotateY(180deg)'
      }
    },
  }

<style>
#accountKeysLogin {
  perspective: 150rem;
  position: relative;
  height: 40rem;
  max-width: 400px;
  margin: 2rem;
  box-shadow: none;
  background: none;
}
.accountKeys {
  transition: all 0.8s ease;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  color: white;
}
.accountKeys.keys {
  transform: rotateY(-180deg);
}
</style>