用html的两面翻转div

我在我正在建立的网站上有一个登录表单，而且我还有一个注册表单。 当点击“注册”链接时，我想通过将div旋转到另一侧来添加一些奇特的动画。 我希望登录表单位于正面，注册表单位于背面。 我宁愿不使用javascript，但如果有必要，我会。

谢谢你的任何答案！

Answer 1

您可以使用CSS transition和transform: rotateY()来执行动画transform: rotateY()不使用Javascript的transform: rotateY() ，而不是通过添加类来触发动画。

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

 
 
login
   login sign up 
 
 
signup
    create  

脚本：

 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上旋转所以它面向后方。 – 并在hover时旋转两个div以使其转动页面的效果。