我在我正在建立的网站上有一个登录表单,而且我还有一个注册表单.当点击“注册”链接时,我想通过将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 );
