用css实现翻转卡片之登录注册

---

前言

本文用css实现登录注册的翻转卡片效果，点击登录翻转到登录卡片，点击注册则翻转到注册卡片。

效果如下：

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、翻转卡片思路

1.首先写两个盒子，分别是login（登录）、signup（注册），将两个盒子用绝对定位放置于中间并重叠。

2.先将signup盒子旋转-180deg，接着用backface-visibility:hidden;来隐藏掉翻转到背面的signup盒子。

3.添加点击事件，当点击登录时，将login盒子翻转-180deg，而signup盒子翻转0deg回到正面，反之同理。

二、代码实现

JS部分：

let login=document.querySelector(".login");
let signup=document.querySelector(".signup");
let gos=login.querySelector("a");
let gol=signup.querySelector("a");
//点击去注册，触发事件
gos.addEventListener("click",()=>{
   
  login.style.transform="rotateY(180deg)"
  signup.style.transform="rotateY(0deg)"
})
//点击去登录，触发事件
gol.addEventListener("click",()=>{
   
  signup.style.transform="rotateY(-180deg)"
  login.style.transform="rotateY(0deg)"
})

HTML部分：