CSS旋轉過渡動畫

.box {
width: 100px;
height: 100px;
background-color: pink;
transition: transform 1s ease;
}
.box:hover {
transform: rotate(180deg);
}

在進行網頁的設計中，動畫效果是不可缺少的。而CSS旋轉過渡動畫是一個十分簡單卻又很精彩的特效。

通過CSS的transform屬性與transition屬性相結合，我們可以輕松的實現一個元素在鼠標懸浮的情況下旋轉180度的動畫效果。

在代碼中，我們首先定義了一個名為box的元素，它的寬高分別為100px，背景顏色為粉色。然后，我們在.box選擇器下設置了transition屬性，表示元素在發生變化時需要進行過渡動畫，并且過渡動畫時間為1秒鐘，過渡效果為ease。

接著，在.box:hover選擇器下，我們設置了transform屬性，并將元素旋轉了180度。這樣，在鼠標懸浮在元素上時，它就會呈現出一種旋轉效果。

CSS旋轉過渡動畫不僅可以給網頁帶來一些新鮮感和活力，還能夠提升用戶的交互體驗，讓網頁看起來更加生動有趣。