CSS是網頁制作中不可或缺的工具，它不僅可以控制網頁的樣式，還可實現許多有趣的效果。今天我們來學習一下如何制作CSS書本翻頁輪播圖。

首先，我們需要準備書本的圖片資源。書本的圖片需要分成左右兩半，分別命名為“left.png”和“right.png”。

.book {
position: relative;
width: 400px;
height: 250px;
}
.book .left, .book .right {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
background-size: cover;
background-position: left top;
background-repeat: no-repeat;
}
.book .left {
left: 0;
background-image: url(left.png);
}
.book .right {
right: 0;
background-image: url(right.png);
}

代碼中，我們先創建一個容器，命名為“book”，并設定寬高。接著，我們創建左右兩個子元素，寬度設定為50%，并將背景圖片設為“left.png”和“right.png”。

接下來，我們需要制作翻頁效果。我們可以利用CSS3的transition屬性實現平滑過渡效果。

.book .left {
transform-origin: right top;
transform: rotateY(0deg);
transition: transform 1s;
}
.book .right {
transform-origin: left top;
transform: rotateY(-180deg);
transition: transform 1s;
}
.book:hover .left {
transform: rotateY(180deg);
}
.book:hover .right {
transform: rotateY(0deg);
}

代碼中，我們將左側子元素設置為原始位置，右側子元素設置為旋轉180度的位置。當鼠標懸停在容器上時，我們將左側子元素旋轉180度，右側子元素回歸原始位置。

最后，我們需要設置自動輪播。我們可以使用CSS的animation屬性實現自動輪播。

.book .left {
animation: turn 4s linear infinite;
}
.book .right {
animation: turn 4s linear infinite reverse;
}
@keyframes turn {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(0deg);
}
}

代碼中，我們為左右兩側子元素都添加了“turn”動畫，并設定時間為4秒，動畫函數為“linear”，重復無限次。我們還為動畫添加了關鍵幀，分別為初始位置、翻頁中間位置和恢復位置。

好了，我們現在已經學會了如何制作CSS書本翻頁輪播圖。希望本篇文章對大家有所幫助！