与双方的html翻转div

我有一个登录表单我正在建设，我也有一个注册表单。我想通过在点击“注册”链接时将div旋转到另一侧来添加一些奇特的动画。我希望登录表单位于正面，而注册表单位在背面。我宁愿不使用JavaScript，但如果有必要，我会。与双方的html翻转div

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

来源

2012-01-30 Ryan Smith

您可以使用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);

来源

2012-01-30 03:01:59 ThinkingStiff

非常感谢！代码的有用和平！ – 2013-12-31 11:30:39

制作像您所描述的动画的唯一方法是操纵DOM。没有很多方法，我不能想到这样做，而不使用JavaScript。

通过使用纯HTML，您可以为DIV A和B创建一个相同的模板，然后在两者之间进行POST更改，但这不会使您喜欢的动画变得华丽。

来源

2012-01-30 02:54:58

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

1）您将需要使用JavaScript，与CSS的同时，也可能像jQuery，一个框架，没有点重新发明轮子，jQuery的已经具备了优秀的动画东西内置的。

2）细分动画进入实际发生的阶段。所以粗略地说，影子出现了，给人的感觉是表格从页面上移开，内容淡入淡出，形成宽度动画为0，然后与新内容相反的过程消失。

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

来源

2012-01-30 02:57:57

我做的，你也许可以使用翻转功能，其走T A位第一次加载一个小故障，但我敢肯定它的东西未成年人..

访问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 */ 
}

来源

2013-11-27 06:31:24 MJ55

对于该解决方案在所有浏览器中运行看here。原理是。 - 将一个div放在另一个div上。 - 在div上旋转，所以它正面朝后。 - 并旋转两个div悬停，以便其翻页效果。

来源

2016-03-30 16:37:59

如果您与本网站有联系，请注意您必须在邮件本身**中披露您的联属**。谢谢！ – Undo 2016-03-30 17:14:49

与双方的html翻转div

回答

相关问题