带css3变换的Bootstrap翻转卡

Question

我想使用CSS3转换创建一个自举翻转卡。 我确实是从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类选择器

更简单

<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
</video>

demo