Flip div with two sides of html

Question

I have a login form on a site I am currently building, and I also have a signup form. I would like to add some fancy animation to it by rotating the div to the other side wh

Answer 1

You can do the animation using CSS transition and transform: rotateY() with no Javascript, other than triggering the animation by adding a class.

Demo: 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

Script:

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 );