如何在 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://www.cainiaomax.com/images/html.gif" alt="Example Image">
<h3>Rotated image by 90 degrees using css transform property</h3>
<img src="https://www.cainiaomax.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://www.cainiaomax.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 旋转图片是提升网页视觉趣味的绝佳方法。通过以上示例，我们可以看到使用角度、悬停效果和动画等不同方法旋转图片是多么简单。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
