CSS 控制圖片上下翻滾可以通過以下步驟實現：

/* 首先，為圖片創建一個包含容器 */
.image-container {
display: block;
position: relative;
width: 400px;
height: 300px;
overflow: hidden;
}
/* 然后將圖片絕對定位到容器的頂部 */
.image-container img {
position: absolute;
top: 0;
left: 0;
}
/* 最后使用 CSS3 動畫屬性實現上下翻滾效果 */
/* 設置動畫時間和變換方式 */
.image-container img {
animation: flip-image 8s ease-in-out infinite;
}
/* 創建動畫 */
@keyframes flip-image {
/* 圖片向下旋轉 180 度 */
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(180deg);
}
/* 圖片向上旋轉 180 度 */
100% {
transform: rotateX(360deg);
}
}

這里使用了 CSS3 提供的 transform 屬性，通過旋轉圖片的 X 軸實現圖片的翻滾效果。通過設置動畫時間和變換方式，可以實現不同的翻滾效果。如果要讓圖片沿著 Y 軸翻滾，則可以將 rotateX 改為 rotateY。