CSS翻轉效果是 Web 開發中常用的視覺效果之一。它為網頁添加了互動性和視覺吸引力。

一種使用 CSS 實現翻轉效果的方法是使用transform 屬性。transform 屬性可以使元素沿著 X、Y 或 Z 軸翻轉，而無需使用 JavaScript。

.flip-container {
perspective: 1000px;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}

在上面的 CSS 中，我們創建了一個 flip-container 類，它具有 perspective 屬性，它定義了 3D 容器的透視效果。我們還使用 transform 屬性定義了翻轉效果。flipper 類使用 transform-style 和 position 屬性定義了翻轉效果。使用 backface-visibility 屬性隱藏元素的反面。

要使用這個 CSS，你只需要將它添加到你的 HTML 元素上：

以上是 CSS 翻轉效果的簡單實現。你可以嘗試更改其中的數值，以實現你所需的效果。