CSS 翻轉角度是一項非常重要的特性，它可以使我們創建出更加豐富、吸引眼球的網站效果。本文將介紹 CSS 翻轉角度的基本原理和實際應用。

/* 對元素進行 3D 翻轉：*/
transform: rotateY(180deg);
/* 對元素進行 2D 翻轉：*/
transform: rotateX(180deg);

CSS 中的 transform 屬性可以在 2D 或 3D 空間中轉換和變形對象。它們具有一些選項，包括旋轉 (rotate)、縮放 (scale) 和位移 (translate)。在這些選項中，我們可以使用 rotate 對元素進行翻轉。

/* 通過設置 transition 屬性實現漸變翻轉效果：*/
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}

上述代碼演示了如何使用 transition 屬性在鼠標懸停時觸發對象翻轉。此外，我們還可以使用以下代碼控制翻轉的速度和延遲時間：

.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}

最后，我們來看一個完整的代碼示例，它演示了如何通過設置不同的角度值和過渡時間計算出翻轉角度：

/* 設置小球的基本樣式 */
.ball {
width: 50px;
height: 50px;
background: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
border-radius: 50%;
transition-duration: 1s;
transition-timing-function: cubic-bezier(0.71, -0.46, 0.29, 1.46);
}
/* 當鼠標懸停時，設置翻轉角度 */
.ball:hover {
transform: rotateY(720deg);
}

此代碼片段會在鼠標懸停時將一個紅色小球翻轉 2 周，非常適合用于網站的鼠標交互效果設計。