带css3变换的Bootstrap翻转卡

Question

我想用CSS3转换创建一个自举翻转卡.我确实从这个工作和基本的例子开始

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

我已经修改了代码,你可以在这里看到.

问题是在正确翻转到背面后卡不会翻转到前面.

有人可以建议任何解决方案吗？

注意: 问题似乎与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 类选择器要简单得多

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

});

演示