使用CSS变换旋转时为什么图像的大小会发生变化

Question

我有卡片翻转效果

function flip(card, callback) {
    $.each(card, function(i, card) {
        card = $(card);
        card.find('img').css({
            //perspective: 400,
            rotateX: 0
        }).animate({
            rotateX: 90
        }, function() {
            var file = card.hasClass('back') ? front : back;
            $(this).attr('src', file).css('rotateX', 270).animate({
                rotateX: 360
            }, function() {
                $(this).css('rotateX', 0);
                card.toggleClass('back front');
                if (typeof callback === 'function') {
                    callback();
                }
            });
        });
    });
};

当我翻转卡片（更改rotateX - 它是jQuery css插件）时，点击卡片的大小要小得多，然后当动画完成时它会回到prevoius大小。如果我在翻转时不更改URL，它可以正常工作。为什么会这样？我该如何解决？这是jsfiddle。

更新它只会在Google Chrome中发生这种情况。在Firefox中它工作正常。