問題描述

我在當前正在構建的網(wǎng)站上有一個登錄表單，我也有一個注冊表單.當單擊注冊"鏈接時，我想通過將 div 旋轉到另一側來添加一些精美的動畫.我希望登錄表單位于正面，而注冊表單位于背面.我寧愿不使用 javascript，但如果有必要，我會.

I have a login form on a site I am currently building, and I also have a signup form. I would like to add some fancy animation to it by rotating the div to the other side when the "Sign up" link is clicked. I want the login form to be on the front side, and the signup form on the back. I would rather not use javascript, but if necessary, I will.

感謝您提供任何可能的答案！

Thanks for any possible answers!

推薦答案

您可以使用 CSS transition 和 transform: rotateY() 來制作動畫，無需 Javascript，其他而不是通過添加一個類來觸發(fā)動畫.

You can do the animation using CSS transition and transform: rotateY() with no Javascript, other than triggering the animation by adding a class.

演示:http://jsfiddle.net/ThinkingStiff/9UMFg/

CSS:

.flip {
    backface-visibility: hidden;
    border: 1px solid black;
    height: 150px;
    position: absolute;
    transform-origin: 50% 50% 0px;
    transition: all 3s;
    width: 300px;    
}

#side-1 {
    transform: rotateY( 0deg );
}

#side-2 {
    transform: rotateY( 180deg );   
}

.flip-side-1 {    
    transform: rotateY( 0deg ) !important;
}

.flip-side-2 {
    transform: rotateY( 180deg ) !important;
}

HTML:

<form id="side-1" class="flip">
    <div>login</div>
    <input id="username" placeholder="enter username" />
    <input id="password" placeholder="enter password" />
    <a id="login" href="#">login</a>
    <a id="signup" href="#">sign up</a>
</form>
<form id="side-2" class="flip">
    <div>signup</div>
    <input id="new-username" placeholder="enter username" />
    <input id="new-password" placeholder="enter password" />
    <input id="new-re-password" placeholder="re-enter password" />
    <a id="create" href="#">create</a>
</form>

腳本:

document.getElementById( 'signup' ).addEventListener( 'click', function( event ) {

    event.preventDefault();
    document.getElementById( 'side-2' ).className = 'flip flip-side-1';
    document.getElementById( 'side-1' ).className = 'flip flip-side-2';

}, false );

這篇關于用html的兩側翻轉div的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！