Carta di flip bootstrap con trasformata css3

Question

Voglio creare una carta di flip bootstrap usando la trasformazione CSS3. Ho iniziato da questo working and basic example

Tuttavia, volevo modificarlo per avere una scheda di altezza fissa e alcuni miglioramenti minori. In particolare, avevo bisogno di avere il capovolgimento della carta quando l'utente fa clic su un'icona che ho creato nell'angolo in alto a destra.

Ho modificato il codice come potete vedere here.

Il problema è che la scheda non si ribalta in avanti dopo essere stata girata correttamente sul retro.

Qualcuno può suggerire una soluzione?

NOTA: il problema sembra essere con il codice jquery. In realtà ho

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

Ma se cambio con

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

tutto funziona come previsto.

Answer 1

Penso che sia molto più semplice utilizzando direttamente il selettore di classe CSS

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

}); 

demo