jquery - 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 プラグイン) クリックするとカードのサイズがはるかに小さくなり、アニメーションが終了すると元のサイズに戻ります。フリップするときに URL を変更しなければ問題なく動作します。なぜこれが起こるのですか？どうすれば修正できますか？ここにjsfiddleがあります。

更新これは、Google Chrome でのみ発生するようです。Firefox では問題なく動作します。