jQuery中animate()方法能夠?qū)崿F(xiàn)各式各樣的動(dòng)畫效果，其中很有趣的一種是翻轉(zhuǎn)效果。翻轉(zhuǎn)效果可以用來制作卡片翻轉(zhuǎn)、翻書等效果。

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

在實(shí)現(xiàn)翻轉(zhuǎn)效果時(shí)，需要在HTML結(jié)構(gòu)中添加一個(gè)包裹容器（.flip-card）和內(nèi)部元素容器（.flip-card-inner），并設(shè)置相關(guān)的CSS屬性。在JS代碼中，通過添加/移除類名（flip）來實(shí)現(xiàn)翻轉(zhuǎn)效果的切換。