右侧按钮登录注册html 翻转式用户登录注册界面设计

这是一款非常实用的翻转式用户登录注册界面设计效果。该用户登录注册界面使用纯CSS3来制作，在用户点击登录和注册两个按钮时，登录和注册界面可以以水平翻转的方式来回切换，效果非常的酷。

制作方法

HTML结构

该用户登录注册表单的HTML结构如下：主要分为sign-in和sign-up两个部分。

Sign In

Sign Up

Username

Password

Keep me Signed in

Forgot Password?

Username

Password

Repeat Password

Email Address

Already Member?

CSS样式

在登录和注册界面进行切换时使用了CSS3 3D Transforms属性，由于IE浏览器不支持transform-style:preserve-3d;，所以在IE浏览器中得不到正常的翻转效果。

.login-form{

min-height:345px;

position:relative;

-webkit-perspective:1000px;

perspective:1000px;

-webkit-transform-style:preserve-3d;

transform-style:preserve-3d;

}

下面是该用户登录注册界面的一些截图效果。