本文的编辑与大家分享，html css创造了一个漂亮的可翻转登录注册界面代码的实例。 我觉得编辑很好，现在分享供参考。 有需要的伙伴来看看。
创建漂亮的可翻转登录注册接口
前言
我最近打算做一张网盘。 您使用的技术堆栈可能是. net core MVC Mysql Layui。 主要目的是通过这个具体项目熟悉. net core开发。 net的未来是他。
用户单击sign up后，从登录反转为注册，单击log in从注册反转为登录
技术上应该不难，但是B格马上看起来相当高啊。
具体效果可以直接引出到最下面
具体实现
Html
Login
LOGIN
If you don't have account.Please
Click here to Sign Up
注册器
注册器
have a帐户？ You can
Click here to Log in
Css
body {
/*颜色这取决于个人喜好*
后台： darkslategrey；
/*字体这取决于个人喜好*
字体系列： sans-serif；
}
/*主要是确定中间形式的尺寸，调整到自己觉得漂亮就可以了*/
. mainbody {
height: 440px；
width: 400px；
}
/*定心效果/
. middle {
/*左上角与父元素的中心对齐*
top: 50%；
left: 50%；
位置： absolute；
/*向左50%*/
传输：传输(-50%、-50%；
}
. form-box {
width: 100%；
height: 100%；
margin :自动；
后台：德克夏延；
/*我觉得这个圆角的大小正好*
border-radius: 40px；
}
. input-normal {
width: 220px；
高： 38px；
margin : 30px自动；
padding: 0；
文本对齐3360中心；
border-radius: 20px；
Outline :无；
显示： block；
transition: 0.3s；
border: 1px solid #e6e6e6；
}
. btn-submit {
width: 100px；
height: 36px；
margin :自动；
font-size: 18px；
文本对齐3360中心；
color:白色；
border-radius: 20px；
显示： block；
后台： darkslategrey；
transition: 0.3s；
}
. front {
变换：旋转(0deg )；
}
/*将背部旋转180度，背面面向用户，这里是y轴的*/
. back {
变换：旋转(-180度)；
}
. front，
. back {
位置： absolute；
/*然后设定为面向用户背面时不可见*/
巴克脸-可见性：隐藏；
我觉得在linear上会很光滑*/
传输： 0.3s线性；
}
将前端旋转180度*
. middle-flip .front {
变换：旋转(180度)；
}
/*将倒车旋转180度*
. middle-flip .back {
变换：旋转(0deg )；
}
/*我调整过了，但是风格很好。 也可以换成其他漂亮的样式*/
p {
margin : 15px自动；
padding: 0；
font-size: 16px；
color:白色；
显示： block；
文本对齐3360中心；
}
a {
color: aqua；
cursor: pointer；
}
js
单击sigup以触发翻转样式
$('#sigup ' ).click(function () ) ) ) ) ) )。
$('.middle ' ).Toggleclass('middle-flip )；
)；
单击login以触发翻转样式
$('#login ' ).click(function () ) )。
$('.middle ' ).Toggleclass('middle-flip )；
)；
效果
你看起来还不错呢
可以考虑在transfrom后面添加透视以增强立体感
我使用的perspective(600px )。
不管你们怎么想，反正我觉得这个效果是绿色的