CSS3在設計網(wǎng)頁時可以實現(xiàn)許多酷炫的效果，例如實現(xiàn)圖片左右手滑動的效果。下面我們就來介紹一下如何實現(xiàn)這個效果。

<div class="container">
<div class="hand left"></div>
<img src="image.jpg" alt="image">
<div class="hand right"></div>
</div>// CSS代碼如下：.container{
position: relative;
overflow: hidden;
}
.hand{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: #333;
opacity: 0.5;
cursor: pointer;
}
.left{
left: 0;
border-radius: 0 5px 5px 0;
}
.right{
right: 0;
border-radius: 5px 0 0 5px;
}
img{
display: block;
width: 100%;
height: auto;
transition: transform 0.5s ease-in-out;
}
.left:hover ~ img{
transform: translateX(30%);
}
.right:hover ~ img{
transform: translateX(-30%);
}

代碼中的div.container是圖片的容器，通過設置position屬性為relative和overflow屬性為hidden，使圖片的容器可以保持相對定位和隱藏溢出部分。

div.hand表示圖像左右手的容器，通過設置position屬性為absolute和設置top屬性為50%和transform屬性為translateY(-50%)實現(xiàn)圖像左右手容器的垂直居中。同時，通過設置寬和高以及背景顏色和透明度，我們可以創(chuàng)建一個半透明黑色的圓圈手形圖像。

通過設置左和右的容器，我們可以使左邊的手形圖像在圖像左側，右邊的手形圖像在圖像右側。同時，我們可以通過設置border-radius屬性為不同的半徑值來實現(xiàn)圓角的效果。

對于圖像的CSS代碼，我們可以設置display:block，寬為100%以及高為auto，這樣圖像就可以按比例縮放以適應其容器。同時，我們可以設置transition屬性使圖像在移動時產(chǎn)生緩慢的動畫效果。

當鼠標懸停在左側的容器上時，我們將圖像向右移動30%。同樣，當鼠標懸停在右側的容器上時，我們將圖像向左移動30%。這個效果可以通過使用CSS3的~選擇器實現(xiàn)。

以上就是CSS3實現(xiàn)圖片左右手滑動的方法。你可以根據(jù)自己的需求和喜好來修改代碼，達到不同的效果。