最近接到這麼一個需求，登入彈框 註冊彈框 要翻撲克的效果切換，主要是有2個點：

   1. 兩個彈框的位置要重合，否則沒法當做是一張撲克的正反面，所以就不能彈性盒子了，就得是fixed 或者 relative 定位了
   2. 旋轉度數，旋轉360度，是感覺多了一圈，旋轉180度，結果是個映象的，還需要偷偷換成正向的，所以我的方案是旋轉到90度，也就是正檢視幾乎看不到彈框時，瞬間變成270，然後繼續旋轉到360度

上程式碼：

<div class="login-out-box" v-show="visible" @toggleLogin="toggleLogin(false)"></div>

<div class="login-out-box" v-show="!visible" @toggleLogin="toggleLogin(true)"></div>

.login-out-box,.register-out-box{
  position: fixed;
  left:50%;
  top:50%;
  animation: trans-page 2s;
}

@keyframes trans-page
{
  0% {transform: rotateY(0deg);}
  50% {transform: rotateY(90deg);}
  51% {transform: rotateY(270deg);}
  100%  {transform: rotateY(360deg);}
}

toggleLogin(visible){
   this.visible = visible
}