在 HTML 中旋轉影象

Sushant Poudel 2023年2月19日
在 HTML 中旋轉影象

本文將介紹一種在 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> 標籤。同樣,將影象旋轉到 180deg360deg

下面的示例說明了一種在 HTML 影象源中旋轉影象的方法。我們已經為 <img> 標籤設定了樣式,這意味著可以使用 transform:rotate() 屬性旋轉插入的影象。我們插入原始影象並將影象旋轉到 90180360 度。我們可以在 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 Poudel avatar Sushant Poudel avatar

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.

LinkedIn