jquery, как сделать эффект переворота?

Я пытаюсь имитировать эффект, который обычно встречается на мобильных устройствах, где у вас есть панель, и когда вы нажимаете кнопку, она вращается, а с другой стороны у нее есть другая информация.

Я нашел код, использующий переход css s и вот пример

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

});

проблема с этим примером заключается в том, что если я конвертирую javascript в jquery, он перестает работать:

from:

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

to

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

Также я не уверен если еще нет плагина jquery, который делает это лучше.

Есть идеи?

еще немного кода. html

    sign up


    create

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

​