这是 上的 解决方案。
JS：
$('.flip').click(function(){
$(this).find('.card').addClass('flipped');
return false;
}).mouseleave(function () {
$('.flip > .card').removeClass('flipped');
});
var frontHeight = $('.front').outerHeight();
var backHeight = $('.back').outerHeight();
if (frontHeight > backHeight) {
$('.flip, .back').height(frontHeight);
}
else if (frontHeight > backHeight) {
$('.flip, .front').height(backHeight);
}
else {
$('.flip').height(backHeight);
}
定义的高度不灵活，因此您看到的就是定义的高度。由于高度将不会保持恒定，因此前部或后部需要具有定义的高度，以匹配最高的元素。在示例中，.front较高，因此.back将其更新为相同的高度，从而使您能够在中心实现垂直翻转效果。
在您的示例中，mouseleave事件可以在动画期间的元素时触发。我以为您不希望这种情况发生，因此我更新了逻辑以.flipped在离开卡时删除它，该逻辑将在整个动画过程中保持其高度。我还清理了CSS，以减少冗余。希望这可以帮助！
602392714
清零编程群