CODEWITHSUNDEEP
jquerycssrotationcss-animations
Ryan Smith
Ryan Smith

Reputation: 694

Flip div with two sides of html

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!

Upvotes: 4

Views: 16602

Answers (5)

Sharath N B
Sharath N B

Reputation: 25

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.

Upvotes: 0

MJ55
MJ55

Reputation: 11

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 */
}

Upvotes: 1

ThinkingStiff
ThinkingStiff

Reputation: 65361

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

Upvotes: 17

i-CONICA
i-CONICA

Reputation: 2379

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.

Upvotes: 2

Dan Kanze
Dan Kanze

Reputation: 18595

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.

Upvotes: 0

Related Questions