首頁 >web前端 >css教學 >如何在 HTML 中旋轉圖像？

如何在 HTML 中旋轉圖像？

WBOY轉載: 2023-09-01 09:37:061792瀏覽

如何在 HTML 中旋转图像？

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

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

文法

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

<style>
   transform: rotate(angle);
</style>

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

如何在HTML中旋轉影像？

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

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

使用 CSS 變換屬性

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

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

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

範例 1

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

<!DOCTYPE html>
<html>
<head>
   <style>
      body{ text-align:center; }
      .my-img {
         transform: rotate(90deg);
         margin-top: 10px;
         padding: 5px;
         border: 5px solid #555;
      }
      img {
         margin-top: 5px;
         padding: 5px;
         border: 5px solid #555;
      }
   </style>
</head>
   <body>
      <h3>Normal Image</h3>
      <img src="https://www.tutorialspoint.com/images/html.gif" alt="Example Image">
      <h3>Rotated image by 90 degrees using css transform property</h3>
      <img src="https://www.tutorialspoint.com/images/html.gif" class="my-img" alt="Example Image">
   </body>
</html>

使用CSS懸停效果

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

<style>
.img:hover {
   transform: rotate(60deg);
}
</style>

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

範例 2

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

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      img{
         border: 5px solid #555;
         transition: transform 0.5s ease;
      }
      .my-img:hover {
         transform: rotate(60deg);
      }
   </style>
</head>
   <body>
      <h3>Hover me to rotate by 60 degrees</h3>
      <img src="https://www.tutorialspoint.com/images/html.gif" class="my-img" alt="Example Image">
   </body>
</html>

使用 CSS 動畫

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

<style>
.my-img {
   border: 5px solid #555;
   margin-top: 20px;
   animation: rotation 4s infinite linear;
}
@keyframes rotation {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}
</style>

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

範例 3

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

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      .my-img {
         border:5px solid #555;
         margin-top:20px;
         animation: rotation 4s infinite linear;
      }
      @keyframes rotation {
         from {
            transform: rotate(0deg);
         }
         to {
            transform: rotate(360deg);
         }
      }
   </style>
</head>
   <body>
      <h3>To rotate an image in a circular way using CSS</h3>
      <img src="/images/html.gif" class="my-img"></div>
   </body>
</html>

結論

使用 HTML 旋轉圖像是為網頁添加視覺趣味的好方法。透過上面的範例，我們可以看到使用不同的方法（例如度數、懸停效果和動畫）旋轉圖像是多麼容易。

以上是如何在 HTML 中旋轉圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html 循环伪类 transform animation

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何在CSS中建立三角形？下一篇：如何在CSS中建立三角形？

看更多