Question

I have a simple Login form and Registration form, currently they rotate at the y-axis when the container is hovered on, and then rotate back to start when the hover is removed.

what I need is to bind it so when the Register Button is clicked, it flips to the backside (registration page) and then if I click the To Login Button, it reverts back to the front side again.

here’s the fiddle to eliminate a wall of text.

any assistance appreciated.

Answer 1

It’s pretty simple, you were almost there. Since you have

/*#f1_container:hover #f1_card,*/ #f1_container.hover_effect #f1_card {
  transform: rotateY(180deg);
}

in your CSS, you just need to add/ remove the .hover_effect class when clicking the Register/ To Login buttons, that’s all.

It only takes a bit of JavaScript:

var face_changers = document.querySelectorAll('.btnFlip'), 
    f1_container = document.getElementById('f1_container');

for(var i = 0; i < face_changers.length; i++){
    face_changers[i].addEventListener('click', function(e) {
        f1_container.classList.toggle('hover_effect');
        e.preventDefault();
    }, false);
}​

demo

[note that I also commented out the hover part so there is no flip on hover anymore; apart from that, I haven’t made any changes to the CSS or the HTML]