資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 HTML 中旋轉影像？
影像網頁的重要組成部分，有時需要旋轉它們以使其看起來更好或適合網頁。HTML 中的影像旋轉是一個相對簡單的過程，可以使用 CSS 完成。
從特定角度更改影像方向的過程稱為影像旋轉。CSS transform 屬性是旋轉影像的常用且簡單的方法。此屬性用於移動、旋轉、縮放和執行元素的多種變換。
語法
以下是 HTML 中旋轉影像的語法：
<style> transform: rotate(angle); </style>
這裡“angle”是要應用於元素的旋轉量，以度為單位指定。
如何在 HTML 中旋轉影像？
影像在網頁設計中至關重要，因為它可以為網站增添視覺吸引力並向用戶提供資訊。有多種方法可以在 HTML 中旋轉影像，包括 CSS transform 屬性、懸停效果和動畫。
這裡我們將逐一探討這些方法：
使用 CSS Transform 屬性
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://tutorialspoint.tw/images/html.gif" alt="Example Image">
<h3>Rotated image by 90 degrees using css transform property</h3>
<img src="https://tutorialspoint.tw/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://tutorialspoint.tw/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 旋轉影像是在網頁中新增視覺趣味的好方法。透過以上示例，我們可以看到使用度數、懸停效果和動畫等不同方法旋轉影像有多麼容易。
3K+ 閱讀量
