用html的两边翻转div

Question

我在目前正在建设的一个网站上有一个登录表单，我也有一个注册表单。当点击"注册"链接时，我想通过将div旋转到另一边来添加一些有趣的动画。我希望登录表格在正面，注册表格在背面。我宁愿不使用javascript，但如果有必要，我会的。

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

Answer 1

您可以使用CSS transition和transform: rotateY()在没有Javascript的情况下制作动画，而不是通过添加类来触发动画。

演示：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 );

Answer 2

我现在没有时间写任何代码，但有些指针可能会有所帮助；

1） 你需要使用JavaScript，结合CSS，可能还有像jQuery这样的框架，没有必要重新发明轮子，jQuery已经内置了出色的动画内容。

2） 将动画分解为实际发生的各个阶段。大致上，阴影出现了，给人的印象是表单已经从页面上移开，内容逐渐消失，表单宽度动画化为0，然后新内容逐渐消失。

3） 已经有很多优秀的DOM操作效果，搜索很酷的jquery内容切换等，你会发现很多。

Answer 3

我做了一个翻转菜单，你可能会使用它，它在第一次加载时有点小故障，但我确信它是次要的。。

访问jsfiddle

CSS：

.switch-selection
{
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
width: 130px;
height: 22px;
background: #fbfbfb;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari, Chrome */
-khtml-border-radius: 3px; /* KHTML */
border-radius: 3px; /* CSS3 */
}

Answer 4

制作与您所描述的动画类似的动画的唯一方法是操作DOM。如果不使用javascript，我想不出有多少方法可以做到这一点。

使用纯HTML，您可以为DIV a和B构建一个相同的模板，然后在两者之间进行POST更改，但这不会使华而不实的动画像您想要的那样。

Answer 5

有关在所有浏览器上工作的解决方案，请参阅此处。原则是。-将一个div放在另一个div上。-在div上旋转，使其朝后。-并在悬停时旋转两个div，使其具有翻页效果。