jesse1981
5/8/2013 - 12:33 AM

Two sided DIV example with flip over animation. See Also: http://stackoverflow.com/questions/10035643/jquery-how-to-do-a-flip-effect

Two sided DIV example with flip over animation. See Also: http://stackoverflow.com/questions/10035643/jquery-how-to-do-a-flip-effect

flip.js
content_copyfile_download
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 );

document.getElementById( 'create' ).addEventListener( 'click', function( event ) {
    
    event.preventDefault();
    document.getElementById( 'side-2' ).className = 'flip';
    document.getElementById( 'side-1' ).className = 'flip';
    
}, false );
form.html
content_copyfile_download
Click "sign up" to flip, "create" to flip back.
<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>
style.css
content_copyfile_download
.flip {
    backface-visibility:             hidden;
        -moz-backface-visibility:    hidden;
        -ms-backface-visibility:     hidden;
        -o-backface-visibility:      hidden;
        -webkit-backface-visibility: hidden;
    border: 1px solid black;
    height: 105px;
    font: normal 14px helvetica, arial, san serif;
    padding: 10px;
    position: absolute;
    transform-origin:             50% 50% 0px;
        -moz-transform-origin:    50% 50% 0px;
        -ms-transform-origin:     50% 50% 0px;
        -o-transform-origin:      50% 50% 0px;
        -webkit-transform-origin: 50% 50% 0px;
    transition: all 3s;
        -moz-transition:    all 3s;
        -ms-transition:     all 3s;
        -o-transition:      all 3s;
        -webkit-transition: all 3s;
    width: 300px;    
}

#side-1 {
    transform:             rotateY( 0deg );
        -moz-transform:    rotateY( 0deg );
        -ms-transform:     rotateY( 0deg );
        -o-transform:      rotateY( 0deg );
        -webkit-transform: rotateY( 0deg );
}

#side-2 {
    transform:             rotateY( 180deg );
        -moz-transform:    rotateY( 180deg );
        -ms-transform:     rotateY( 180deg );
        -o-transform:      rotateY( 180deg );
        -webkit-transform: rotateY( 180deg );
}

.flip-side-1 {    
    transform:             rotateY( 0deg ) !important;
        -moz-transform:    rotateY( 0deg ) !important;
        -ms-transform:     rotateY( 0deg ) !important;
        -o-transform:      rotateY( 0deg ) !important;
        -webkit-transform: rotateY( 0deg ) !important;
}

.flip-side-2 {
    transform:             rotateY( 180deg ) !important;
        -moz-transform:    rotateY( 180deg ) !important;
        -ms-transform:     rotateY( 180deg ) !important;
        -o-transform:      rotateY( 180deg ) !important;
        -webkit-transform: rotateY( 180deg ) !important;
}

input {
    display: block;
    margin: 3px 0;
    width: 294px;    
}

#login, #create {
    background-color: black;
    border: 1px solid black;
    color: white;
    display: block;    
    float: right;
    text-align: center;
    text-decoration: none;
    width: 50px;
}