CSS3.0之后，出現了使用CSS3D滾動圖片的方法。在這種方法中，我們可以使用鼠標向左或向右滾動，以查看一系列的圖片。下面我們來看一下如何實現。

.container {
perspective: 1000px; /* 設置透視點，1000像素是距離頁面1000像素的透視點 */
perspective-origin: 50% 50%; /* 設置透視原點，這里是中心點 */
overflow: hidden; /* 隱藏超出容器的部分 */
width: 100%;
height: 400px; /* 設置容器的寬高 */
}
.slider {
display: flex; /* 設置彈性布局 */
width: 100%; /* 設置寬度 */
height: 100%;
transform-style: preserve-3d; /* 開啟3D變換 */
transition: transform 0.5s; /* 過渡效果，當滾動時會使用該效果 */
}
.slide {
flex: 1; /* 彈性布局，讓圖片占滿整個容器 */
height: 100%;
margin: 0 10px; /* 圖片之間的間距 */
transform-style: preserve-3d; /* 開啟3D變換 */
transform-origin: center center 0; /* 設置變換的原點 */
position: relative; /* 相對定位 */
}
.slide:before, .slide:after {
/* 設置一些裝飾性的元素 */
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.slide:before {
background: linear-gradient(to right, rgba(0,0,0,0.5), transparent); /* 使用漸變效果 */
transform: translateZ(-1px) scale(2); /* 3D變換，使圖片更加真實 */
}
.slide:after {
background: linear-gradient(to left, rgba(0,0,0,0.5), transparent); /* 同上 */
transform: translateZ(1px) scale(2);
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover; /* 圖片自適應 */
}
.slider.left {
transform: translateX(-100%) rotateY(90deg); /* 設置向左滾動的效果 */
}
.slider.right {
transform: translateX(100%) rotateY(-90deg); /* 設置向右滾動的效果 */
}

以上就是使用CSS3D滾動圖片的代碼，你只需要將它加入你的HTML頁面中即可。記得將圖片與容器的尺寸相適應，以保證顯示效果最佳。同時，你也可以根據自己的需要，添加其他樣式和效果，讓你的頁面更加炫酷！