Bootstrap Flip-Karte mit CSS3-Transformation

Question

Ich möchte eine Bootstrap-Flip-Karte mit CSS3 transform erstellen. Ich habe von dieser working and basic example

gestartet, aber ich wollte es ändern, um eine Karte mit fester Höhe und einige kleinere Verbesserung zu haben. Insbesondere musste ich die Karte spiegeln, wenn der Benutzer auf ein Symbol klickt, das ich oben rechts erstellt habe.

Ich habe den Code geändert, wie Sie here sehen können.

Das Problem ist, dass die Karte nicht nach vorne kippt, nachdem sie korrekt zur Rückseite umgedreht wurde.

Kann jemand eine Lösung vorschlagen?

Hinweis: scheint das Problem mit dem Jquery-Code zu sein. Eigentlich habe ich

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

Aber wenn ich es ändern mit

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

Alles funktioniert wie erwartet.

Answer 1

Ich denke, dass es viel einfacher mit direkt dem CSS-Klasse-Selektor ist

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

}); 

demo