度

rotate(90deg) ：順時針旋轉 90 度

rotate(105deg) ：順時針旋轉 105 度

rotate(120deg) ：順時針旋轉 120 度

rotate(135deg) ：順時針旋轉 135 度

rotate(150deg) ：順時針旋轉 150 度

rotate(165deg) ：順時針旋轉 165 度

rotate(180deg) ：逆時針旋轉 180 度

旋轉木馬效果

CSS3 旋轉可用于創建引人入勝的旋轉木馬效果。旋轉木馬效果是一種常見的 UI 模式，它涉及圍繞其中心連續旋轉一組元素。要創建旋轉木馬效果，請使用 @keyframes 規則指定旋轉動畫，然后將該動畫應用于元素。

示例： 以下代碼創建了一個簡單的旋轉木馬效果，其中元素以 15 度角順時針旋轉：

    @keyframes rotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}.carousel {animation: rotate 5s infinite linear;}

結論

CSS3 旋轉屬性是網頁設計中一個強大的工具。通過了解 transform 屬性并使用不同的旋轉值，您可以創建引人入勝的動畫、旋轉木馬效果和其他視覺效果。使用 CSS3 旋轉，您可以最大限度地發揮您的創造力，并為您的用戶打造更加直觀和吸引人的體驗。

---

---

相關標簽： 提升您的網頁設計、 CSS3、 css3旋轉木馬效果、 旋轉指南、

上一篇：CSS手冊從初學者到專css手冊中文版

下一篇：CSS3旋轉教程從基礎到高級技巧css3旋轉屬性