CSS3 旋轉按鈕導航已經成為了網頁設計中非常流行的一種元素，它不僅可以為網頁增加動態效果，還能夠提升用戶體驗，讓頁面更加具有吸引力。下面我們來學習一下如何使用 CSS3 旋轉按鈕導航。

/* 首先，需要定義一個容器 */
.nav-container {
width: 600px;
margin: 0 auto;
text-align: center;
}
/* 定義按鈕的樣式 */
.nav-item {
display: inline-block;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #FF5A5F;
color: #FFFFFF;
font-size: 18px;
line-height: 60px;
text-align: center;
margin: 30px;
cursor: pointer;
}
/* 使用 CSS3 進行旋轉 */
.nav-item:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
transition: all 0.5s ease-in-out;
}

上面的代碼可以創建一個包含 5 個按鈕的按鈕組，每個按鈕都有 60px 的寬度和高度，并且它們默認呈圓形。CSS3 的 transition 屬性使得鼠標懸停時，按鈕會產生旋轉的效果。

功能強大的 CSS3 旋轉按鈕導航，可以為您的網站增添不少色彩和生氣。通過此教程您可以快速地學會如何使用它們，讓您的網站與眾不同。