CSS3 寬度向左滑動是一種常見的動畫效果之一，它可以讓網頁元素在頁面中向左移動，從而達到吸引用戶注意力的效果。

要實現這種效果，我們可以使用 CSS3 中的transition和transform屬性。其中transition屬性用于定義過渡的動畫效果，而transform屬性用于實現元素的移動。

.box {
position: relative;
width: 200px;
height: 200px;
background-color: #f5f5f5;
transition: transform 1s ease;
}
.box:hover {
transform: translateX(-50%);
}

在上面的示例代碼中，我們創建了一個名為box的元素，并定義了它的初始樣式。然后使用transition屬性，告訴瀏覽器需要進行動畫效果，transform屬性用于實現元素的移動。

當鼠標懸停在元素上時，我們通過添加:hover偽類，對元素進行樣式調整，實現元素向左滑動的效果。在這里，我們使用的是translateX(-50%)，它表示在 X 軸方向上向左移動元素的寬度的一半。

需要注意的是，使用這種方法進行元素移動時，需要將元素的定位屬性設置為relative或absolute，以便transform屬性正確工作。

通過上面的代碼，我們便可以輕松實現 CSS3 寬度向左滑動的效果，讓網頁內容更具有吸引力和交互性。