在CSS中，我們可以使用 transform 屬性來控制元素的變換效果，其中包括圖片的上下顛倒。下面我們來通過代碼實現這一效果。 首先，我們需要在 HTML 中插入一張圖片：

<img src="example.jpg" class="flip">

接下來，我們在 CSS 中編寫樣式代碼，使用 transform: scaleY(-1) 屬性將圖片垂直翻轉：

.flip {
transform: scaleY(-1);
}

這里的 scaleY(-1) 表示在 Y 軸方向上進行翻轉，并通過負數來實現上下顛倒的效果。 需要注意的是，如果圖片的父級元素也做了翻轉操作，可能會導致圖片翻轉后出現不正常的效果，這時需要將圖片再添加一個父級元素，并對該元素進行翻轉操作。 通過這種方法，我們可以輕松實現 CSS 圖片的上下顛倒效果，為網頁設計帶來更多可能性。