帶有css3變換的引導翻轉卡

Question

我想通過使用CSS3變換來創建引導翻轉卡。 我的確從此開始了working and basic example

但是我想修改它以獲得固定高度的卡片和一些小的增強。特別是當用戶點擊我在右上角創建的圖標時，我需要翻牌。

我修改了代碼，你可以看到here。

問題是卡片在翻轉到背面後沒有翻轉回來。

有人可以提出任何解決方案嗎？

NOTE： 這個問題似乎與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'); 

}); 

demo