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。

更新这似乎只发生在谷歌浏览器中。在 Firefox 中它工作正常。