過渡旋轉(zhuǎn)是 CSS 中一種非常常見的動畫效果，可以通過設(shè)置 transform 屬性中的 rotate 角度來實(shí)現(xiàn)。使用過渡可以使得旋轉(zhuǎn)更為平滑自然，更加美觀，增強(qiáng)用戶體驗(yàn)。

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

上面的代碼片段中，我們?yōu)?.box 元素設(shè)置了一個 transform 過渡效果，過渡時間為 1 秒，過渡類型是緩入緩出。當(dāng)鼠標(biāo)懸浮在 .box 元素上時，我們再將元素旋轉(zhuǎn) 360 度。

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

.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);
/* 鼠標(biāo)懸浮時，將元素旋轉(zhuǎn)720度 */
}

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