圖片對折（image folding）是一種流行的網頁設計效果，它能夠將一張圖片在頁面上分割成幾個部分，然后利用 CSS 的變形和過渡特性，將這些分割的部分組合成一個有趣的動態效果。下面我們來看看如何利用 CSS 實現圖片對折效果。

首先，我們創建了一個名為 folding-image 的容器來包含兩個子元素 fold。這個容器設置了固定的寬度和高度，以及 overflow: hidden，這樣子元素 fold 就不會溢出容器。

接著，對于每個子元素 fold，我們設置了絕對定位和大小的屬性，以及背景圖片的地址和尺寸設置。注意，這里的背景圖片需要是橫向拼接的兩張圖片，一張是正面，另一張是反面。

然后，我們設置了每個子元素 fold 的 transform-origin，表示旋轉的原點為左側。同時，我們使用了 transform-style: preserve-3d，使其能夠在三維空間內進行變換。nth-of-type 選擇器用于區分子元素 fold 的不同樣式。

最后，在 hover 事件中，我們改變每個子元素 fold 的旋轉角度，使其能夠像折紙一樣對折和展開。我們使用了 transition 屬性來控制旋轉的過渡動畫效果。

以上就是實現圖片對折效果的 CSS 代碼。如果你想了解更多關于 CSS 變形和過渡的知識，可以查看相關文檔和教程。