旋轉卡 可以用做登錄註冊

最新新出的設計稿，設計要求登錄註冊找回密碼不設置單獨頁面  直接彈窗出來 且切換效果要旋轉來  以為不容易   沒想到做著感覺還闊以  哈哈 

現在貼出來  

這是兩個按鈕，樣式按照自己的來寫就行

<a class="loginEnter" id="loginEnter" href="javascript:;">登錄</a>|
<a class="loginEnter" id="registerEnter" href="javascript:;">註冊</a>

這裡是彈出的html  我簡化了  只留了做切換的按鈕  none的樣式就是dispaly:none;

<div id="loginregBox" class="none">
        <div id="loginBox" class="none">
            <h2 class="loginregTitle">登錄</h2>
                    <a class="rotateBtn" id="forgetPassword">忘記密碼？</a>                   
                    <p class="bottomCon">還沒有賬號嗎？ <a id="goRegisterBox" class="gotoBtn">立即註冊>></a></p>
            </div>
        </div>
        <div id="registerBox" class="none">
            <h2 class="loginregTitle">註冊</h2>
            <div class="formBox">
                  <p class="bottomCon">已有賬號 <a class="gotoBtn goLoginBox">馬上登錄>></a></p>
            </div>
        </div>

　　div id="ForgetPassword" class="none">
            <h2 class="loginregTitle">找回密碼</h2>
            <div class="formBox">             
                    <p class="bottomCon"><a class="gotoBtn goLoginBox">又想起來了>></a></p>
                </form>
            </div>
        </div>

</div>

下麵就到了關鍵的時刻   js部分

這是封裝的

function loginregister(showdiv,hidediv1,hidediv2){
        $('#loginregBox').css({"transformStyle":"preserve-3d","-webkitTransform":"rotateY(90deg)", "-webkitTransition":"all 0.6s"});
        setTimeout(function(){
            $(showdiv).show();
            $(hidediv1).hide();
            $(hidediv2).hide();
            $(showdiv).css({'transform':'rotateY(180deg)','display':'block'});
        },700);
        setTimeout(function(){
            $('#loginregBox').css({"transformStyle":"preserve-3d","-webkitTransform":"rotateY(180deg)", "-webkitTransition":"all 0.6s"});
        },800);
    };


    //註冊   
    $('#goRegisterBox').click(function(){
        loginregister('#registerBox','#loginBox','#ForgetPassword');           
    });
    // 登錄  &&  想起密碼
    $('.goLoginBox').click(function(){
        loginregister('#loginBox','#registerBox','#ForgetPassword');
    });

    // 忘記密碼
    $('#forgetPassword').click(function(){
        loginregister('#ForgetPassword','#registerBox','#loginBox');
    });

命名可能不規範，勿噴，有需要的拿走