CSS 圖像翻轉是一種將圖像在網頁上旋轉的工具，使用 CSS3 的 transform 屬性實現。

transform 屬性有多種設置，包括 rotate、scale、translate 和 skew 等。對于圖像翻轉來說，我們主要關注 rotate 的使用。

.image {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}

在上述代碼中，我們將圖像的 Y 軸旋轉了 180 度，實現了水平翻轉。同樣，我們也可以使用 rotateX 實現垂直翻轉，rotateZ 或 rotate 實現任意角度的翻轉。

除此之外，我們還可以將圖像翻轉作為鼠標懸浮事件的效果，為用戶帶來更加生動、豐富的體驗。

.image:hover {
transform: rotateY(180deg);
}

上述代碼將在用戶將鼠標懸停在圖像上時將其水平翻轉。如果想要實現其他效果，只需要調整 rotate 的角度即可。

圖像翻轉是網頁設計中重要的一部分，它可以讓頁面變得更加生動、有趣，同時也為用戶提供了一種新的交互方式。