Rotating cards can be used for login registration and rotating login Registration

Rotating cards can be used for login registration and rotating login Registration

The latest design draft requires login, registration, password retrieval, and direct pop-up on a separate page without setting the password, and the switching effect should be rotated to make it difficult to think that it is still quite open. Haha

Post it now

There are two buttons, and the style can be written according to your own.

<A class = "loginEnter" id = "loginEnter" href = "javascript:;"> logon </a> |
<A class = "loginEnter" id = "registerEnter" href = "javascript:;"> register </a>

Here is the pop-up html. I simplified it and left the none style of the button for switching. It is dispaly: none;

<Div id = "loginregBox" class = "none">
<Div id = "loginBox" class = "none">
<H2 class = "loginregTitle"> logon <A class = "rotateBtn" id = "forgetPassword"> forgot password? </A>
<P class = "bottomCon"> do you still have an account? <A id = "goRegisterBox" class = "gotoBtn"> Register now >></a> </p>
</Div>
</Div>
<Div id = "registerBox" class = "none">
<H2 class = "loginregTitle"> Registration <Div class = "formBox">
<P class = "bottomCon"> log on to an existing account <a class = "gotoBtn goLoginBox"> </a> </p>
</Div>
</Div>

Div id = "ForgetPassword" class = "none">
<H2 class = "loginregTitle"> retrieve password <Div class = "formBox">
<P class = "bottomCon"> <a class = "gotoBtn goLoginBox"> remember again >></a> </p>
</Form>
</Div>
</Div>

</Div>

 

The following figure shows the js part of the key moment.

This is encapsulated.

Function loginregister (showdiv, hidediv1, hidediv2 ){
Certificate ('your loginregbox').css ({"transformStyle": "preserve-3d", "-webkitTransform": "rotateY (90deg)", "-webkitTransition": "all 0.6 s "});
SetTimeout (function (){
$ (Showdiv). show ();
$ (Hidediv1). hide ();
$ (Hidediv2). hide ();
Certificate (showdiv).css ({'transform': 'rotatey (180deg) ', 'display': 'block '});
},700 );
SetTimeout (function (){
Certificate ('your loginregbox').css ({"transformStyle": "preserve-3d", "-webkitTransform": "rotateY (180deg)", "-webkitTransition": "all 0.6 s "});
},800 );
};


// Register
$ ('# Goregisterbox'). click (function (){
Loginregister ('# registerbox',' # loginbox', '# forgetpassword ');
});
// Log on and remember the password
$ ('. Gologinbox'). click (function (){
Loginregister ('# loginbox',' # registerbox', '# forgetpassword ');
});

// Forgot password
$ ('# Forgetpassword'). click (function (){
Loginregister ('# forgetpassword',' # registerbox', '# loginbox ');
});

The name may be nonstandard. Do not spray it. Take it away if necessary.