如何在 HTML 中旋转图像？

百变鹏仔 3个月前 (09-20) #CSS

文章标签图像

图片是网页的重要组成部分，有时需要对其进行旋转以使其更好看或适应网页。在HTML中进行图片旋转是一个相对简单的过程，可以使用CSS完成。

将图像从特定角度改变方向的过程称为图像旋转。CSS transform属性是一种常见且简单的旋转图像的方法。该属性用于移动、旋转、缩放和执行多种元素变换。

语法

以下是在HTML中旋转图像的语法 -

<style>   transform: rotate(angle);</style>

这里“角度”是应用于元素的旋转量，以度为单位指定。

立即学习“前端免费学习笔记（深入）”；

如何在HTML中旋转图像？

图片是网页设计的重要组成部分，因为它增加了网站的视觉吸引力并向用户提供信息。在HTML中有多种方法可以旋转图片，包括CSS的transform属性、悬停效果和动画。

这里我们将一一探讨这些方法 -

使用 CSS 变换属性

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" alt="如何在 HTML 中旋转图像？" ></div>   </body></html>

结论

使用 HTML 旋转图像是为网页添加视觉趣味的好方法。通过上面的示例，我们可以看到使用不同的方法（例如度数、悬停效果和动画）旋转图像是多么容易。

文章推荐

如何在 HTML 中旋转图像？

语法

如何在HTML中旋转图像？

使用 CSS 变换属性

示例 1

使用CSS悬停效果

示例 2

使用 CSS 动画

示例 3

结论

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写