Michael Zippo
CSS rotate() 函數將元素扭曲一定的度數。您可以使用正數度數順時針旋轉元素。或者您可以使用負數逆時針旋轉項目。
今天我們將學習如何使用 CSS 旋轉元素。為什麼要旋轉元素？旋轉元素使您的網頁更具交互性。使用得當，旋轉元素會增加網站的美感。
閱讀本文時，請參考 配套存儲庫，因此您可以看到實際的概念。知道如何旋轉元素將是您 CSS 工具箱的重要補充。
CSS rotate () 函數允許您在 2D 軸上旋轉元素。 rotate() 函數有一個參數：您想要旋轉 Web 元素的角度。你可以順時針或逆時針旋轉一個元素。
我們看一下rotate()函數的語法：
“角度”值表示元素應旋轉的度數。您可以使用正度數（例如 45）指定順時針旋轉。或者您可以使用負角度值（例如 -39）向相反方向旋轉。
rotate () 函數可以應用於任何 HTML 元素。例如，您可以旋轉一段文本。或者您可以旋轉圖像。
一呈現頁面就會出現 HTML 旋轉，因此沒有可見的旋轉。要查看實際的旋轉，您需要使用 CSS 過渡。轉換會在執行操作時更改元素的狀態，例如當光標懸停在元素上時。
讓我們繼續創建我們的 HTML 頁面來放置一個旋轉框。添加一個框作為 div 並為其分配一個類（我們將其稱為“旋轉”）。
現在讓我們添加一些樣式：
刷新。太好了，我們有一個彩色盒子。有了這個彩色框，我們就擁有了開始使用 rotate() 函數所需的一切。
" CSS 變換函數 顧名思義，就是變換元素。我們可以對其應用的函數之一是 rotate()。 transform 屬性可以承擔很多其他功能，我們可以對轉換做很多事情。 Rotate 只是其中之一。rotate 函數移動一個元素。我們需要一個參數：我們想要傾斜元素的度數。讓我們繼續應用正向 35 度旋轉：
我們已經旋轉了我們的盒子！觸摸自己的背部。
旋轉允許複雜的用戶界面創意或旋轉圖像。例如，您可以將圖像旋轉 180 度。如果您需要在其他地方旋轉此圖像，請保存並相應地使用它。
您可以旋轉的另一件事是文本。假設您創建了一個模仿雜誌的佈局，您實際上可以旋轉文本以強調文本元素。
這並不是您可以使用 rotate () 所做的全部。旋轉功能允許我們創建非常有趣的動畫！
讓我們從 `before 開始，讓我們在 div 上使用 CSS: hover selector 來應用漂亮的旋轉效果：
Isn " N`不是涼爽？
<人物類=“WP-圖像塊”>
當我們將鼠標懸停在它上面時，我們的框架會旋轉。當我們將鼠標懸停在框架上時，我們使用 CSS background-color 屬性來改變框架的顏色。
CSS rotate() 函數帶來了一個不對稱的 Web 元素。一個接受一個參數：元素的旋轉度數。您可以指定正值或負值。
旋轉元素使您的網頁更美觀。例如，當用戶將光標懸停在單元格上時，您可以對單元格應用旋轉。或者，您可以決定在用戶將鼠標懸停在鏈接上時旋轉鏈接。如何使用這項技能取決於您！
您有興趣了解更多關於 CSS 的知識嗎？查看我們的完整 CSS 學習指南，了解有關最佳學習資源的專家建議和技巧。
