数据结构
网络
关系型数据库管理系统
操作系统
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.com/images/html.gif" alt="Example Image">
<h3>Rotated image by 90 degrees using css transform property</h3>
<img src="https://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://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 旋转图像是在网页中添加视觉趣味的好方法。通过以上示例，我们可以看到使用度数、悬停效果和动画等不同方法旋转图像有多么容易。
3K+ 阅读量
