Загрузочная флип-карта с преобразованием css3

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

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

}); 

demo