扑克动画 切换弹框 transform

最近接到这么一个需求，登录弹框 注册弹框 要翻扑克的效果切换，主要是有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
}