在前端開發中，常常需要對圖片進行各種各樣的操作，其中之一就是圖片旋轉。在這里，我們將介紹如何使用純CSS實現一張圖片旋轉180度的效果。 首先，我們需要準備一張要旋轉的圖片，并將其添加到我們的HTML頁面中。接著，我們使用CSS樣式表中的transform屬性來實現旋轉效果。具體來說，我們可以使用以下樣式實現圖片順時針旋轉180度： ``` img { transform: rotate(180deg); } ``` 通過將transform屬性設置為rotate(180deg)，我們可以使圖片順時針旋轉180度。這個180度的角度是可以自己調整的，可以根據實際需要設置不同的旋轉角度。 此外，我們還可以使用CSS動畫來實現圖片旋轉的過渡效果。下面是一個基本的CSS動畫示例： ``` img { animation: rotate 2s forwards; } @keyframes rotate { from { transform: rotate(0); } to { transform: rotate(180deg); } } ``` 在上面的代碼中，我們定義了一個名為rotate的關鍵幀動畫。通過添加animation: rotate 2s forwards樣式，我們可以將動畫應用于圖片元素，并使其在2秒后逐漸地順時針旋轉180度。其中，forwards選項表示動畫結束后保持最后一幀的狀態。 總的來說，使用純CSS實現圖片旋轉可以使我們更好地掌控樣式和動畫，同時保持Web頁面的性能和交互。如果你還沒有嘗試過這種技術，不妨參照上述代碼實踐一下。