CSS 如何旋转一个元素

CSS或级联样式表是控制网站的视觉呈现的强大工具。CSS具有许多属性和效果，用于控制网页的视觉呈现；其中最常见的视觉效果之一是能够旋转元素，如图像或文本块。

语法

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

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

什么是CSS中的旋转

在CSS（级联样式表）中，“rotate”属性用于围绕其中心点或选定点旋转元素，例如图像或文本块。 “rotate”属性是“transform”属性的一部分，它允许我们对元素应用各种变换。

“rotate”属性将角度值（以度为单位）作为其参数，指定要应用于元素的旋转量。正值以顺时针方向旋转元素，负值则以逆时针方向旋转。

使用CSS旋转元素的步骤

要使用CSS旋转元素，我们可以使用以下步骤-

首先，使用CSS选择器选择要旋转的元素。
然后，将“transform”属性应用于所选元素。
最后，将“rotate”函数作为“transform”属性的值。

在这里，我们将讨论如何使用CSS旋转元素，包括不同的方法和属性以及示例。

方法1：使用“transform”属性

“transform”属性是CSS中旋转元素的最常用方法。此属性允许元素对HTML元素应用各种变换，包括旋转。要旋转元素，使用rotate()函数，其以度为单位的角度值作为参数。

例如，要将图像旋转45度，使用以下CSS代码-

img {
   transform: rotate(45deg);
}

这段代码将图像旋转45度。

示例

这是一个完整的代码示例，用于将图像旋转45度。

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      img {
         transform: rotate(45deg);
         margin-top:40px;
         padding:10px;
      }
   </style>
</head>
   <body>
      <h3>To rotate an image by 45 degrees</h3><br>
      <img src="/html/images/test.png" alt="Example Image">
   </body>
</html>

方法2：使用“transform-origin”属性

可以使用transform-origin属性来改变旋转的原点。该属性允许指定一个围绕该元素应该旋转的点。

例如，要围绕图像的 左下角 旋转，我们可以使用以下CSS代码−

my-img {
   transform-origin: bottom left;
   transform: rotate(60deg);
}

这段代码将围绕图像的左下角旋转 60 度。

示例

以下是使用”transform-origin”属性将图像旋转60度的完整代码示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .my-img {
         transform-origin: bottom left;
         transform: rotate(60deg);
      }
   </style>
</head>
   <body>
      <h3>Before Rotation</h3><br>
      <img src="/html/images/test.png" alt="Example Image">
      <h3>After rotation</h3>
      <img class="my-img" src="/html/images/test.png" alt="Example Image">
   </body>
</html>

方法3：使用 “transition” 属性

为了给旋转添加平滑的动画效果，我们可以使用 “transition” 属性。”transition” 属性允许指定 CSS 属性的持续时间和时间函数，包括 “transform” 属性。

例如，当在图像上悬停时，要为图像添加平滑旋转动画，我们可以使用以下 CSS 代码 −

img {
   transition: transform 0.5s ease;
}
img:hover {
   transform: rotate(45deg);
}

这段代码将在用户将光标悬停在图像上时，通过平滑动画将其旋转45度。

示例

以下是使用“transition”属性将图像旋转45度的完整代码示例。

<!DOCTYPE html>
<html>
   <style>
      body {
         text-align: center;
      }
      img {
         transition: transform 0.5s ease;
      }
      img:hover {
         transform: rotate(45deg);
      }
   </style>
   <body>
      <h1>Using the "transition" property</h1>
      <p>The Image will rotate by 45 degrees when the mouse hovers over it</p>
      <img src="/html/images/test.png" alt="Example Image" />
   </body>
</html>