如何在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.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中，我们可以轻松地添加悬停效果，当用户将鼠标悬停在图像上时，图像会旋转。要做到这一点，我们使用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.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>