我正在创建一个flipcard应用程序，需要帮助

Question

我正在创建一个jQuery flashcard应用程序。除了翻转部分，我已经把一切都搞定了。我无法使用插件。我实际上有一半的翻转部分编码，但我无法弄清楚如何使反面执行旋转。这是我到目前为止的jQuery。

$('#pp1').click(function(){
    $(this).addClass('flip');
    $(this).hide(1000, function(){
        $('#pp2').show();
    });
});

这显示卡的正面并将整个东西翻转到中途，但不会继续旋转，背面显示。我只需要反过来做这个功能吗？如果没有，是否有人对我需要做的事情有任何想法？

CSS

.flip{
    -moz-transform: rotateY(90deg);
    -moz-transition: all 1s ease;
}

HTML

<li><img id="pp1" src="GIII-Flashcards/Flashcard-JPGs/Flashcard-PP-1.jpg" /></li>
<li><img id="pp2" src="GIII-Flashcards/Flashcard-JPGs/Flashcard-PP-2.jpg" /></li>