CSS 控制圖片上下翻滾可以通過以下步驟實現(xiàn)：

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

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