我在我正在建立的网站上有一个登录表单,而且我还有一个注册表单.当点击“注册”链接时,我想通过将div旋转到另一侧来添加一些奇特的动画.我希望登录表单位于正面,注册表单位于背面.我宁愿不使用javascript,但如果有必要,我会.
谢谢你的任何答案！
解决方法
您可以使用CSS转换和转换来执行动画：不使用Javascript的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：
<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 );
