在 HTML 中旋轉影象

Sushant Poudel 2023年2月19日

HTML HTML Imgae Rotation

本文將介紹一種在 HTML 中旋轉影象的方法。

在 HTML 中使用 `transform` CSS 屬性旋轉影象

CSS transform 屬性意味著修改我們程式碼中的特定元素。我們需要一個外部資源，在這種情況下我們轉換的影象，來轉換它。此屬性將 2D 或 3D 變換應用於元素。此外，此屬性還授予對細節進行旋轉、縮放、移動、傾斜等操作的授權。它還改變了 CSS 視覺格式模型的座標空間。佈局受 CSS 盒模型控制的元素只能進行轉換。我們可以將 transform 屬性設定為 rotate() 函式，在函式中提及用於在 HTML 中旋轉影象的單位。影象要旋轉的值應在函式的括號中提供。deg 單位用於指定旋轉值。為此，我們可以使用內聯 CSS。CSS 將用於 <img> 標籤。

例如，在 HTML 中插入帶有 <img> 標籤的常規影象。將 src 屬性設定為 https://loremflickr.com/320/320。然後，對於 90 度旋轉，插入影象併為其新增一些樣式。在 style 屬性中，將 transform 屬性設定為 rotate(90deg)。然後，新增一個 <br> 標籤。同樣，將影象旋轉到 180deg 和 360deg。

下面的示例說明了一種在 HTML 影象源中旋轉影象的方法。我們已經為 <img> 標籤設定了樣式，這意味著可以使用 transform:rotate() 屬性旋轉插入的影象。我們插入原始影象並將影象旋轉到 90、180 和 360 度。我們可以在 rotate() 函式中寫入所需的度數值。示例中的第二個影象最多旋轉軸的一半。第三張圖片看起來是倒置的，因為它被旋轉了 180 度。當影象完成 360 度旋轉時，它看起來像原始影象。因此，我們可以使用 transform() 屬性和 rotate() 值來使用 HTML 和 CSS 旋轉影象。

示例程式碼：

<html>
<body>
 Original Image
 <img src="https://loremflickr.com/320/320" /> <br>
 90 degree Rotation
 <img src="https://loremflickr.com/320/320" style="transform:rotate(90deg);"> <br>
 180 degree Rotation
 <img src="https://loremflickr.com/320/320" style="transform:rotate(180deg);"> <br>
 360 degree Rotation
 <img src="https://loremflickr.com/320/320" style="transform:rotate(360deg);"> <br>
</body>
</html>

作者： Sushant Poudel

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

在 HTML 中使用 transform CSS 屬性旋轉影象

在 HTML 中使用 `transform` CSS 屬性旋轉影象