問題描述
我在當前正在構建的網(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)！