如何在 HTML 中旋轉圖像？

圖片是網頁的重要組成部分，有時需要對其進行旋轉以使其更好看或適應網頁。在HTML中進行圖片旋轉是一個相對簡單的過程，可以使用CSS完成。

將影像從特定角度改變方向的過程稱為影像旋轉。 CSS transform屬性是一種常見且簡單的旋轉圖像的方法。此屬性用於移動、旋轉、縮放和執行多種元素變換。

文法

以下是在HTML中旋轉影像的語法 -

這裡「角度」是套用於元素的旋轉量，以度為單位指定。

如何在HTML中旋轉影像？

圖片是網頁設計的重要組成部分，因為它增加了網站的視覺吸引力並向使用者提供資訊。在HTML中有多種方法可以旋轉圖片，包括CSS的transform屬性、懸停效果和動畫。

這裡我們將一一探討這些方法 -

使用 CSS 變換屬性

transform屬性是CSS中最常用的旋轉影像或元素的方法。 rotate()函數用於旋轉元素。 rotate()函數以度數值作為參數，指定旋轉的角度。例如，要將影像旋轉90度，我們可以使用以下CSS程式碼−

.my-img { transform: rotate(90deg); }

上述程式碼將使用 transform 屬性將影像旋轉90度。

範例 1

以下是使用CSS transform屬性將影像旋轉90度的完整程式碼範例。

    
  
Normal Image
  
Rotated image by 90 degrees using css transform property
   

使用CSS懸停效果

要建立動態和互動的網頁，CSS懸停效果是一種流行的旋轉圖像的方式。在CSS中，我們可以輕鬆地添加一個懸停效果，當使用者懸停在圖像上時，圖像會旋轉。為了做到這一點，我們在CSS中使用:hover偽類別。以下是一個範例−

在上面的範例中，我們使用:hover偽類別來在使用者懸停在影像上時套用旋轉效果。使用transform屬性將影像旋轉60度。

範例 2

以下是使用:hover偽類別將影像旋轉 60 度的完整程式碼範例。

    
  
Hover me to rotate by 60 degrees
   

使用 CSS 動畫

使用 CSS 動畫旋轉圖片是創建動態和互動式網頁的另一種方法。在 CSS 中，我們可以輕鬆地在圖像中添加動畫，使其連續旋轉或旋轉指定的持續時間。為此，我們可以使用以下程式碼。

在上述程式碼中，我們使用animation屬性來建立一個連續重複的旋轉動畫。 @keyframes規則用於定義旋轉動畫。 from關鍵字設定動畫的起始點，to關鍵字設定結束點。

範例 3

這是一個使用 CSS 動畫方法以循環方式旋轉圖像的完整程式碼範例。

    
  
To rotate an image in a circular way using CSS