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

要使解决方案适用于所有浏览器，请参阅here。原则是。 - 将一个div放在另一个div上。 - 在div上旋转，让它面向后方。 - 并在悬停时旋转两个div以使其转动页面的效果。

用html的两面翻转div

5 个答案: