Bootstrap Flip-Karte mit CSS3-Transformation

Ich möchte mithilfe der CSS3-Transformation eine Bootstrap-Flip-Card erstellen. Ich habe von diesem @ angefangworking und grundlegendes Beispiel

Ich wollte es jedoch ändern, um eine Karte mit fester Höhe und einige kleinere Verbesserungen zu haben. Insbesondere musste die Karte umgedreht werden, wenn der Benutzer auf ein Symbol klickt, das ich oben rechts erstellt habe.

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

Das Problem besteht darin, dass die Karte nicht mehr nach vorne gedreht wird, nachdem sie korrekt nach hinten gedreht wurde.

Kann jemand eine Lösung vorschlagen?

HINWEIS das problem scheint 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 mit @ ände

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

Alles funktioniert wie erwartet.

Antworten auf die Frage(2)

Ihre Antwort auf die Frage