圖片是網頁的重要組成部分，有時需要對其進行旋轉以使其更好看或適應網頁。在HTML中進行圖片旋轉是一個相對簡單的過程，可以使用CSS完成。
將影像從特定角度改變方向的過程稱為影像旋轉。 CSS transform屬性是一種常見且簡單的旋轉圖像的方法。此屬性用於移動、旋轉、縮放和執行多種元素變換。
以下是在HTML中旋轉影像的語法 -
<style> transform: rotate(angle); </style>
這裡「角度」是套用於元素的旋轉量，以度為單位指定。
圖片是網頁設計的重要組成部分，因為它增加了網站的視覺吸引力並向使用者提供資訊。在HTML中有多種方法可以旋轉圖片，包括CSS的transform屬性、懸停效果和動畫。
這裡我們將一一探討這些方法 -
transform屬性是CSS中最常用的旋轉影像或元素的方法。 rotate()函數用於旋轉元素。 rotate()函數以度數值作為參數，指定旋轉的角度。例如，要將影像旋轉90度，我們可以使用以下CSS程式碼−
.my-img {
transform: rotate(90deg);
}
上述程式碼將使用 transform 屬性將影像旋轉90度。
以下是使用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中使用:hover偽類別。以下是一個範例−
<style>
.img:hover {
transform: rotate(60deg);
}
</style>
在上面的範例中，我們使用:hover偽類別來在使用者懸停在影像上時套用旋轉效果。使用transform屬性將影像旋轉60度。
以下是使用 :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 中，我們可以輕鬆地在圖像中添加動畫，使其連續旋轉或旋轉指定的持續時間。為此，我們可以使用以下程式碼。
<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關鍵字設定結束點。
這是一個使用 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中文網其他相關文章！
