翻转div与html的两个侧面 [英] Flip div with two sides of html

问题描述

我在当前正在构建的网站上有一个登录表单，并且我也有一个注册表单.我想通过单击注册"链接时将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!

推荐答案

除了添加类来触发动画外，您还可以使用不带Javascript的CSS transition和transform: rotateY()进行动画处理.

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 );

这篇关于翻转div与html的两个侧面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！