버튼 클릭시 CSS 변형 회전

Question

간단한 로그인 폼과 등록 양식이 있습니다. 현재 컨테이너가 올려 졌을 때 y- 축에서 회전하고, 호버가 제거되면 다시 회전하여 시작합니다.

등록 버튼을 클릭하면 뒷면 (등록 페이지)으로 넘어간 다음 로그인 버튼을 클릭하면 다시 정면으로 되돌아갑니다.

여기에 텍스트의 벽을 없애기 위해 fiddle이 있습니다.

감사의 뜻을 전한다.

Answer 1

아주 간단합니다. 거의 다 왔었습니다. 당신이 당신의 CSS에

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

을 가지고 있기 때문에, 당신은 단지 등록을 클릭하면 버튼을 로그인 /를 .hover_effect 클래스를 추가/제거 할 필요가, 그게 다야.

그것은 단지 자바 스크립트의 비트 취

demo

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

가 [호버에는 플립 더 이상 없다 그래서 나는 또한 호버 부분을 주석주의를; 그 외에도 CSS 나 HTML을 변경하지 않았습니다.

Answer 2

그런 다음, 다음 선택 제로로 회전을 설정

#f1_container:hover #f1_card, #f1_container.hover_effect #f1_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); 
} 

를 회전 선택기를 사용하여, 당신은 대체 할 더욱 구체적인 선택기를 제공해야합니다 그 규칙. 앞에 선택기를 추가하여이 작업을 수행 할 수 있습니다. 가장 좋은 방법은 일반적으로 부모 요소에 클래스를 추가하는 것입니다. 그래서 새 규칙은 같은 모양이

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

f1_container 의 id를 가진 요소뿐만 아니라로 f1_container의 ID로 등록, 반대 단지 요소의 클래스를 일치

등록 버튼을 클릭 할 때 자바 스크립트를 실행하여 요소에 대해이 클래스를 토글하고 싶을 것입니다. 클릭 리스너에 대한 jQuery를 선택하면 그냥 버튼 ITD에 ID를 추가한다면

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

분명히 털이 조금 그래서

당신은 버튼에 고유 ID 또는 클래스가없는 조금 더 간단해질 수 있습니다.