Bootstrap 翻转卡片 css3 变换

Question

我想使用 CSS3 变换制作一张 bootstrap 翻转卡片。我确实是从这个开始的 working and basic example

但是我想修改它以具有固定高度的卡片和一些小的增强功能。特别是当用户点击我在右上角创建的图标时，我需要翻转卡片。

我已经修改了代码，如您所见here。

问题是卡片在正确翻转到背面后没有翻转回正面。

任何人都可以提出任何解决方案吗？

注意： 问题似乎出在 jquery 代码上。其实我有

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

但是如果我用

改变它

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

一切正常。

Answer 1

我认为直接使用 CSS class 选择器

更简单

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

});

Bootstrap flip card with css3 transform