Karta klapki Bootstrap z transformacją css3

Question

Chcę utworzyć kartę klapkową ładowania początkowego za pomocą transformacji CSS3. Zacząłem od tego working and basic example

Jednak chciałem go zmodyfikować, aby mieć kartę o stałej wysokości i niewielką korektę. W szczególności musiałem odwrócić kartę, gdy użytkownik kliknie ikonę, którą utworzyłem w prawym górnym rogu.

Zmodyfikowałem kod, jak widać here.

Problem polega na tym, że karta nie odwraca się z powrotem na przód po prawidłowym odwróceniu na drugą stronę.

Czy ktoś może zaproponować jakieś rozwiązanie?

UWAGA: problem wydaje się być związany z kodem jquery. Właściwie mam

$('div.flipControl').on('click', function() { 
    $(this).closest('div[class="card"]').toggleClass('flipped'); 
}); 

Ale jeśli zmienię go

$('div.flipControl').on('click', function() { 
    $(this).parent().parent().parent().toggleClass('flipped'); 
}); 

Wszystko działa zgodnie z oczekiwaniami.

Answer 1

myślę, że jest to znacznie prostsze przy użyciu bezpośrednio selektora klasa CSS

$('.flipControl').on('click', function(){ 
    $(this).closest('.card').toggleClass('flipped'); 

}); 

demo