CSS Transform rotation on button click

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.

Ana · Accepted Answer · 2012-10-15 00:14:46Z

2

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]

answered Oct 15, 2012 at 0:14

Ana

37.6k7 gold badges88 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Patrick · Accepted Answer · 2012-10-15 00:02:56Z

1

You'll want to add a class to the beginning of the following selector

#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card

that sets the rotate to zero, then toggle that class on click.

Edit:

You are using the selector to rotate the card

#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

in order to not always have it rotate when you hover, you will need to provide an even more specific selector to override that rule. You can do this by adding any selector before it. The best way to do this is normally adding a class to the parent element. So the new rule will look like this

.registered#f1_container:hover #f1_card, .registered#f1_container.hover_effect #f1_card {
  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  -o-transform: rotateY(0);
  transform: rotateY(0);
}

that will match an element with the id of f1_container as well as a class of registered, as opposed to just an element with the id of f1_container

You will want to toggle this class on the element by executing a bit of javascript when you click on the register button.

You don't have a unique id or class on the button, so the jQuery selector for the click listener is a bit hairy

$('#frmReg button:not(".btnFlip")').on('click', function(){
  $('btnFlip').addClass('registered')
})

Obviously if you were to just add an id to that button itd be a bit simpler.

edited Oct 15, 2012 at 0:02

answered Oct 14, 2012 at 23:37

Patrick

14k5 gold badges38 silver badges53 bronze badges

3 Comments

Daedalus Over a year ago

You might want to be a bit more specific.

Patrick Over a year ago

unless that is a pun on css specificity (in which case, bravo), could you let me know what is unclear?

Daedalus Over a year ago

For other users, you may want to outline what to do specifically. Right now it's rather general and difficult to figure out for users that are not well versed in css3.

Collectives™ on Stack Overflow

CSS Transform rotation on button click

2 Answers 2

demo

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related