CSS3是一種強(qiáng)大的前端開發(fā)技術(shù)，其中包含了許多有趣和實(shí)用的功能。在本文中，我們將分享如何使用CSS3來制作一個(gè)簡單而有趣的翻頁動(dòng)畫效果。預(yù)備代碼使用pre標(biāo)簽。

.page {
position: relative;
width: 100vw;
height: 100vh;
}
.page>div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
perspective: 1000px;
}
.active {
display: block;
}
.page2 {
transform: rotateY(-180deg);
}
.page3 {
transform: rotateY(-360deg);
}
.page4 {
transform: rotateY(-540deg);
}
.page5 {
transform: rotateY(-720deg);
}

首先，我們創(chuàng)建一個(gè)父容器“page”，并將其設(shè)置為相對(duì)定位，以便子元素相對(duì)于此進(jìn)行定位。然后，我們創(chuàng)建若干個(gè)子元素，每個(gè)代表一頁，將其設(shè)置為絕對(duì)定位和旋轉(zhuǎn)轉(zhuǎn)換，并將其“隱藏”（display:none）。必須在父容器“page”中添加僅使用類名“active”顯示當(dāng)前選定頁面的樣式。

jQuery(document).ready(function($) {
var pages = $(".page>div");
var currentPage = 0;
$("#next").click(function() {
if (currentPage === pages.length - 1) {
return false;
}
currentPage++;
pages.removeClass("active");
$(pages[currentPage]).addClass("active");
});
$("#prev").click(function() {
if (currentPage === 0) {
return false;
}
currentPage--;
pages.removeClass("active");
$(pages[currentPage]).addClass("active");
});
});

最后，我們使用jQuery添加運(yùn)動(dòng)控制。我們通過一個(gè)變量來跟蹤當(dāng)前選定的頁面，每次單擊“下一頁”或“上一頁”按鈕時(shí)將其遞增或遞減。在單擊按鈕之前，我們檢查該變量是否已到達(dá)其最大或最小值，以確保不繼續(xù)滾動(dòng)。我們使用“removeClass”方法從所有頁面中刪除“active”類，并使用“addClass”方法將其添加到當(dāng)前選定的頁面中。

這樣，我們就可以創(chuàng)建出一個(gè)簡單而有趣的翻頁動(dòng)畫效果。希望這篇文章對(duì)您有所幫助！