jQuery中animate()方法能夠實現各式各樣的動畫效果，其中很有趣的一種是翻轉效果。翻轉效果可以用來制作卡片翻轉、翻書等效果。

//基本用法
$(selector).animate({rotate: '90deg'}, 1000);
//翻轉效果的實現
$(document).ready(function(){
$('.flip-card').on('click', function() {
$(this).toggleClass('flip');
});
});
.flip-card {
/* 翻轉效果基礎設置 */
position: relative;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
}
.flip-card .flip-card-inner {
/* 翻轉效果內部元素設置 */
position: relative;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
}
.flip-card .flip-card-front, .flip-card .flip-card-back {
/* 卡片正反面設置 */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
backface-visibility: hidden;
}
.flip-card .flip-card-front {
/* 卡片正面設置 */
z-index: 2;
}
.flip-card .flip-card-back {
/* 卡片背面設置 */
transform: rotateY(180deg);
z-index: 1;
}
.flip-card.flip .flip-card-inner {
/* 實現翻轉效果 */
transform: rotateY(180deg);
}

在實現翻轉效果時，需要在HTML結構中添加一個包裹容器（.flip-card）和內部元素容器（.flip-card-inner），并設置相關的CSS屬性。在JS代碼中，通過添加/移除類名（flip）來實現翻轉效果的切換。