jquery how to do a flip effect?

Question

i am trying to mimic an effect found usually on mobile devices where you have a panel and when u click a button it spins around and on the other side it has some other info.

i found some code that usses css transitions and here is an example

the js

$('#signup').on('click', function(e) {
    e.preventDefault();
    document.getElementById( 'side-2' ).className = 'flip flip-side-1';
    document.getElementById( 'side-1' ).className = 'flip flip-side-2';

});

$('#create').on('click', function(e) {
    e.preventDefault();
    document.getElementById( 'side-2' ).className = 'flip';
    document.getElementById( 'side-1' ).className = 'flip';

});

the issue with this example is that if i convert javascript into jquery it stopps working:

from:

 document.getElementById( 'side-2' ).className = 'flip flip-side-1';

to

$( '#side-2' ).addClass('flip flip-side-1');

Also im not sure if there isn't already a jquery plugin that does this in a better way.

Any ideas?

some more code. html

<div id="side-1" class="flip">
    <a id="signup" href="#">sign up</a>
</div>
<div id="side-2" class="flip">
    <a id="create" href="#">create</a>
</div>

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;
    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 1s;
        -moz-transition:    all 1s;
        -ms-transition:     all 1s;
        -o-transition:      all 1s;
        -webkit-transition: all 1s;
}

#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;
}

​

Capetian

Answer 1

http://lab.smashup.it/flip/ is the best I've found for this.

Canuck

I second this, the library is simple to use and very fast. – Manning

I've never liked how the content disappears as the flip occurs with this plugin. This is a good script to do something easily that supports many browsers. But if you'd like to get some quality in there check-out CSS transforms and transitions to do stuff like this: css3playground.com/flip-card.php – Rolf

It might be possible to add some easing effects on this as well, though I haven't tested that theory. If this was smoothed out a bit it would be fantastic. Some jQuery flipbook plugins have a gray or white false background while turning to eliminate that, so perhaps that approach is also a possibility. – Canuck

plugin is simply awesome – Cinnabar

I can't believe this is the accepted answer! If you follow the link it is basically a 404 or some other error page. Down voted for that reason. – Shoop

This answer was written 7 years ago. At the time it was a good answer. It helps to notice the published date. This is what the page looked like the day I linked it. web.archive.org/web/20120408154820/http://lab.smashup.it/flip The code is still available on Github if you follow the link on the page. – Canuck

Answer 2

The upside of using CSS transforms is it will run faster and (once you don't need to put all the styles in five times) it will be very elegant. The downside is that it won't work on some browsers at all (i.e. older browsers with no CSS transform support).

Personally, I'd use CSS transforms. Your code will look better with age and on mobile not worse.

I'll take a wild guess that the reason your jQuery "translation" fails is that existing classes aren't being removed by the translated code, but they are by the pure JavaScript, so:

$('#side-2').removeClass().addClass(' ... ');

If you look at the jQuery options -- they hide the content of the div, then rotate a colored rectangle, then refill the div. The CSS method, when it works, actually works.

Natural

Answer 3

About the current code. The reason why it's not working the way you want it to simply because it's not using any animation when switching between classes. You can use jQuery UI for that.

Shown here: http://jqueryui.com/docs/switchClass/

Majolica