CSS可以幫助我們實現許多有趣的交互效果，其中之一就是照片的左右滑動效果。在這篇文章中，我們將學習如何使用CSS實現這個效果。

首先，我們需要為照片創建一個容器。這個容器可以使用一個div元素來創建，如下所示：

<div class="container">
<img src="photo.jpg" alt="照片">
</div>

現在我們已經有了一個包含照片的容器，接下來我們需要使用CSS來實現滑動效果。我們可以使用CSS的transform屬性來實現這一點。具體來說，我們將使用translateX()函數來移動容器。

以下是CSS代碼：

.container {
position: relative; /* 讓容器相對定位 */
overflow: hidden; /* 隱藏超出容器的部分 */
}
.container img {
position: absolute; /* 讓照片絕對定位，使容器沿著x軸進行移動 */
top: 0;
left: 0;
transition: transform 0.2s ease-in-out; /* 增加過渡效果 */
}
.container:hover img {
transform: translateX(-20px); /* 當鼠標懸停在容器上時，將照片向左移動20像素 */
}

以上代碼將容器設置為相對定位，并將照片絕對定位。接著，我們設置了過渡效果，以使移動看起來更平滑自然。最后，我們使用:hover偽類選擇器將鼠標懸停在容器上時實現容器移動的效果。

現在你知道如何使用CSS實現照片的左右滑動效果了。希望你會在你的網站上使用這個效果，并為你的用戶帶來更好的體驗。