在網頁設計中，經常會用到圖片翻轉效果，這在展示圖片時增加了活力和趣味性。而在 CSS 中，實現圖片翻轉效果也并不復雜，接下來就讓我們來看一看。 首先，我們要了解一下 CSS 中的 transform 屬性。這個屬性可以實現多種變換效果，包括旋轉、縮放和扭曲等。而我們要實現的圖片翻轉效果，也是利用 transform 屬性來完成的。 我們先放一下代碼： ```html

``` ```css .flip { perspective: 1000px; /* 設置透視距離 */ } .flip img { width: 100%; /* 圖片寬度占滿父元素 */ transition: transform 0.5s ease-out; /* 設置過渡效果 */ } .flip:hover img { transform: rotateY(180deg); /* 設置旋轉角度 */ } ``` 上面這段代碼實現了鼠標懸浮圖片時，圖片翻轉效果的動態效果。 我們來逐一解析一下其中的代碼： `perspective` 屬性用來設置透視距離。透視距離是一個虛擬的距離，用來模擬現實中視角的效果。設置了透視距離后，元素會按照遠近的關系來進行變形。 注意：要想使用 perspective 屬性，必須先給父元素設置該屬性。 `transition` 屬性用來設置過渡效果。比如在本例中，我們設置了一個 0.5 秒的過渡時間，讓圖片翻轉時動畫更加平滑自然。 `:hover` 選擇器用來設置鼠標懸浮時的效果。在本例中，我們設置了一個旋轉角度為 180 度的效果，從而實現了圖片翻轉的動態效果。 至此，我們就成功地實現了圖片翻轉效果。當然，這只是其中一種實現方式，你可以根據自己的需求做出不同的效果哦。