CSS3相冊輪播是一種基于CSS3實現的圖片展示效果，通過使用CSS3的動畫效果，展示出美觀的相冊輪播效果。在本文中，我們將學習如何使用CSS3實現相冊輪播。

/* HTML代碼 */
/* CSS代碼 */
.slider {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.slides {
display: flex;
width: 100%;
height: 100%;
}
.slides img {
width: 100%;
height: 100%;
}

在上述代碼中，我們定義了一個包含圖片的div元素，使用flex布局將圖片水平排列。然后，我們可以使用CSS3動畫效果實現圖片滑動的效果。以下是CSS3動畫效果的代碼：

.slides {
display: flex;
width: 300%;
height: 100%;
animation: slide 10s infinite;
}
@keyframes slide {
0% {
transform: translateX(0);
}
33.33% {
transform: translateX(-100%);
}
66.66% {
transform: translateX(-200%);
}
100% {
transform: translateX(0);
}
}

上述代碼中，我們定義了一個名為slide的動畫，通過使用CSS3的transform屬性實現平移的效果。我們使用translateX(-100%)將圖片向左平移，使用infinite將動畫無限循環。

最后，我們可以添加一些CSS3效果，如陰影，hover效果等，使圖片滑動更加美觀。以下是完整的CSS代碼：

.slider {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
.slides {
display: flex;
width: 300%;
height: 100%;
animation: slide 10s infinite;
}
.slides img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slide:hover {
animation-play-state: paused;
}
@keyframes slide {
0% {
transform: translateX(0);
}
33.33% {
transform: translateX(-100%);
}
66.66% {
transform: translateX(-200%);
}
100% {
transform: translateX(0);
}
}

在上述代碼中，我們添加了陰影，圓角等效果。同時，我們使用了CSS3的animation-play-state屬性，使得圖片在hover時停止滑動。

最終效果如下：