Bootstrap翻转卡与css3变换 [英] Bootstrap flip card with css3 transform

问题描述

我想使用CSS3变换创建一个引导翻转卡。
我从这个工作和基本示例开始

I want to create a bootstrap flip card by using CSS3 transform. I did started from this working and basic example

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

However I wanted to modify it to have a fixed height card and some minor enhancement. In particular I needed to have the card flip when the user click on an icon I have created on the top right corner.

我已修改代码，您可以在此处 a>。

I have modified the code as you can see here.

问题是，卡片在正确翻转到背面后不会翻转回到前面。

The problem is that the card does not flip back to front after having flipped correctly to the back side.

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

Can anybody suggest any solution?

注意：
问题似乎是用jquery代码。其实我有

NOTE: the problem seems to be with the jquery code. Actually I have

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

但如果我用

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

一切正常。

推荐答案

我认为直接使用CSS类选择器更简单。

I think that it is much simpler using directly the CSS class selector

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

});

demo

这篇关于Bootstrap翻转卡与css3变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！