flip animation

by bhatnagar018

HTML

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>
<script>
    /* by: thinkingstiff.com
license: http://creativecommons.org/licenses/by-nc-sa/3.0/us/ */

    var headerUri = 'http://stackoverflow.com/q/9058801/918414',
        headerCaption = 'Flip div with two sides of html';

    document.body.insertAdjacentHTML(
        'afterBegin',
        '<a href="' + headerUri + '" ' + 'target="_top" ' + 'onmouseover="this.style.opacity=\'.95\'" ' + 'onmouseout="this.style.opacity=\'1\'" ' + 'style="' + 'background-color: black;' + 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );' + 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );' + 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );' + 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );' + 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );' + 'border: 1px solid black;' + 'border-radius: 2px;' + 'color: white;' + 'display: block;' + 'font: normal 15px/26px Helvetica, Verdana, Tahoma;' + 'height: 26px;' + 'left: 0px;' + 'opacity: 1;' + 'overflow: hidden;' + 'padding: 2px 8px;' + 'position: fixed;' + 'right: 0px;' + 'text-decoration: none;' + 'text-overflow: ellipsis;' + 'text-shadow: -1px -1px black;' + 'top: 0px;' + 'white-space: nowrap;' + 'z-index: 9999;' + '"><img...

CSS

.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);
    margin:0 50%;
}
#side-2 {
    margin:0 50%;
    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;
}

JavaScript

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