CSS3圖片滑動效果是一種非常流行的圖片展示效果，它可以讓網站頁面更加美觀，增強用戶體驗。通過使用CSS3中的transform屬性和transition屬性，我們可以實現類似圖片幻燈片的效果。以下是關于如何使用CSS3圖片滑動顯示的說明。 首先，我們需要在HTML中創建一個DIV容器，名稱可以任意取。在該容器中創建一個UL標簽，用于存放需要展示的圖片。每一張圖片都用一個LI標簽來包含，并在LI標簽中添加一個img標簽，用于指定圖片路徑。

<div class="slider">
<ul>
<li><img src="img1.jpg"></li>
<li><img src="img2.jpg"></li>
<li><img src="img3.jpg"></li>
</ul>
</div>

接下來，我們需要定義CSS樣式，實現圖片滑動效果。首先，我們設置所有的圖片在同一行內展示，且overflow屬性設置為hidden，以隱藏超過容器寬度的內容。

.slider ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
overflow: hidden;
}
.slider li {
flex: 1;
}

接下來，我們使用transform屬性給ul標簽設置初始位置。為了實現平滑動畫，我們需要使用transition屬性指定過渡時間和過渡方式。例如，我們可以設置過渡時間為1秒，過渡方式為ease-out，表示過渡效果會逐漸變慢。

.slider ul {
transform: translateX(0);
transition: transform 1s ease-out;
}

最后，我們使用JavaScript代碼來控制圖片切換效果。如下所示，我們首先創建一個變量index來存儲當前顯示的圖片編號，然后設置一個定時器，每間隔3秒鐘圖片就會向左滑動一定距離，直到超出容器寬度，此時將index加1，再滑動回原位置。如果到達最后一張圖片，就將index重置為0，重新開始滑動效果。

var index = 0;
var slider = document.querySelector('.slider ul');
var liWidth = document.querySelector('.slider li').offsetWidth;
setInterval(function() {
index++;
if (index >= 3) {
index = 0;
}
slider.style.transform = "translateX(-" + liWidth * index + "px)";
}, 3000);

通過以上代碼，我們就可以實現一個簡單的CSS3圖片滑動效果。當然，我們還可以通過修改CSS樣式和JavaScript代碼，實現更加復雜的滑動效果。