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 when the "Sign up" link is clicked. I want the login form to be on the front side, and the signup form on the back. I would rather not use javascript, but if necessary, I will.

Thanks for any possible answers!

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:

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

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

Answer 2

I haven't got time to write any code right now, but some pointers that might help;

1) You will need to use JavaScript, in conjunction with CSS, and probably a framework like jQuery, no point re-inventing the wheel, jQuery already has excellent animation stuff built in.

2) Break down the animation into stages of what's actually happening. So roughly, shadow appears, giving the impression the form has lifted from the page, content fades, form width animates to 0, then the reverse process with the new content fading in.

3) There are lots of excellent DOM manipulation effects already out there, search for cool jquery content switching, etc, you'll find lots.

Answer 3

I made a flip Menu that you maybe could use, its got a bit of a glitch on first load but I am sure its something minor..

Visit jsfiddle

CSS:

.switch-selection
{
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
width: 130px;
height: 22px;
background: #fbfbfb;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari, Chrome */
-khtml-border-radius: 3px; /* KHTML */
border-radius: 3px; /* CSS3 */
}

Answer 4

The only way to make animations like the ones you are describing is manipulating the DOM. There are not many ways I cant think of to do this without using javascript.

With using pure HTML, you could build a template that is identical for DIV A and B, then on a POST change between the two, however this will not make the flashy animation like the one you desire.

Answer 5

For the solution to work on all browser see here. The principle is. - place one div on another. -rotate on div so it's facing back. - and Rotate both divs on hover so that its effect of turning page.