過渡旋轉是 CSS 中一種非常常見的動畫效果，可以通過設置 transform 屬性中的 rotate 角度來實現。使用過渡可以使得旋轉更為平滑自然，更加美觀，增強用戶體驗。

.box {
width: 200px;
height: 200px;
background-color: red;
transition: transform 1s ease-in-out;
/* 過渡時間是1秒，過渡類型是緩入緩出 */
}
.box:hover {
transform: rotate(360deg);
/* 鼠標懸浮時，將元素旋轉360度 */
}

上面的代碼片段中，我們為 .box 元素設置了一個 transform 過渡效果，過渡時間為 1 秒，過渡類型是緩入緩出。當鼠標懸浮在 .box 元素上時，我們再將元素旋轉 360 度。

除此之外，還可以通過設置不同的過渡效果和過渡時間，實現不同的旋轉效果。我們可以通過 cubic-bezier() 函數自定義過渡效果，也可以通過設置過渡時間來控制過渡速度。

.box {
width: 200px;
height: 200px;
background-color: red;
transition: transform 0.5s cubic-bezier(0.42, 0, 0.58, 1);
/* 過渡時間是0.5秒，過渡類型是自定義效果（緩慢-快速-快速-緩慢） */
}
.box:hover {
transform: rotate(720deg);
/* 鼠標懸浮時，將元素旋轉720度 */
}

通過自定義效果，我們可以讓旋轉效果更加流暢自然。限定過渡時間也可以讓我們在不同的場景下獲得不同的效果，例如在菜單導航中，可以使用較短的過渡時間提高用戶操作體驗。