用html的两侧翻转div

2022-01-16 00:00:00 rotation jquery css css-animations

我在当前正在构建的网站上有一个登录表单，我也有一个注册表单.当单击注册"链接时，我想通过将 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，其他而不是通过添加一个类来触发动画.

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

相关文章