Thẻ lật Bootstrap với css3 chuyển đổi

Question

Tôi muốn tạo thẻ lật bootstrap bằng cách sử dụng chuyển đổi CSS3. Tôi đã bắt đầu từ số này working and basic example

Tuy nhiên tôi muốn sửa đổi nó để có thẻ chiều cao cố định và một số cải tiến nhỏ. Đặc biệt, tôi cần phải lật thẻ khi người dùng nhấp vào biểu tượng tôi đã tạo ở góc trên cùng bên phải.

Tôi đã sửa đổi mã như bạn có thể thấy here.

Vấn đề là thẻ không lật ngược về phía trước sau khi đã lật đúng vào mặt sau.

Ai có thể đề xuất giải pháp nào không?

LƯU Ý: sự cố có vẻ là với mã jquery. Thật sự tôi có

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

Nhưng nếu tôi thay đổi nó với

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

Tất cả mọi thứ hoạt động như mong đợi.

Answer 1

Tôi nghĩ rằng đó là đơn giản hơn nhiều sử dụng trực tiếp các lớp CSS selector

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

}); 

demo