如何在 CSS 中设置旋转元素的基准位置?

cssweb developmentfront end technology更新于 2024/3/19 12:28:17

CSS，即层叠样式表，是一个强大的工具，它提供了一系列效果来创建美观、动态的网页。CSS 中最重要的工具之一是旋转元素的功能。旋转元素可以创建独特的设计和动画，吸引用户的注意力并帮助传达信息。在这里，我们将探讨如何在 CSS 中设置旋转元素的基准位置。

CSS 中的 Transform 属性

Transform 属性允许对元素应用各种变换，包括旋转、缩放和倾斜。当对元素应用变换时，元素的基准位置会发生变化，这使得元素的正确定位变得困难。

旋转、缩放、倾斜和平移是 transform 属性的子属性。在这里，我们将重点介绍 rotated 子属性。 Rotate 属性允许元素围绕页面上的固定点旋转。

CSS 中的元素旋转

要在 CSS 中旋转元素，请将 transform 属性与 rotate() 函数结合使用。

语法

<style>
   scc-selector{
      transform: rotate(angle);
   }
</style>

此处的"角度"是指应用于元素的旋转量，以度为单位。

例如，以下代码将元素旋转 30 度 -

.rotate {
    transform: rotate(30deg);
}

旋转元素的位置会根据旋转角度进行调整。这可能会导致元素偏离其原始位置，从而影响其正确保持。

CSS 中可用的旋转变换类型

CSS 中有各种类型的旋转变换，例如 rotate()、rotateX()、rotateY() 和 rotateZ()。rotate() 函数绕元素的中心点旋转元素，而 rotateX() 和 rotateY() 分别绕元素的水平轴和垂直轴旋转元素。 rotateZ() 函数用于绕元素的 z 轴(垂直于屏幕)旋转元素。

设置旋转元素基准位置的重要性

旋转元素的基准位置决定了它相对于其容器的锚点位置。默认情况下，基准位置设置为元素的中心。但是，可以使用 transform-origin 属性调整基准位置。这很重要，因为它会影响元素在页面上的定位方式。
使用 transform-origin 属性调整旋转元素的基准位置
transform-origin 属性可用于调整旋转元素的基准位置。此属性指定元素旋转所围绕的点。默认情况下，基准位置位于元素的中心，这意味着元素围绕其中心点旋转。
要调整基准位置，我们可以将 transform-origin 属性设置为不同的值。

以下代码将基准位置设置为元素的左上角 -

.placed {
   transform-origin: top left;
   transform: rotate(30deg);
}

让我们看一些在 CSS 中设置旋转元素基准位置的示例。

示例 1:围绕中心旋转正方形

在此示例中，我们使用 transform 属性将正方形旋转 30 度，基准位置默认设置为中心。

<!DOCTYPE html>
<html>
<head>
   <style>
      body { text-align: center; }
      .outer-line {
         position: relative;
         height: 200px;
         width: 200px;
         margin: auto;
         padding: 5px;
         border: 4px solid #fbf;
      }
      #box {
         width: 100px;
         height: 100px;
         background-color: red;
         transform: rotate(30deg);
      }
   </style>
</head>
   <body>
      <h3>The square is rotated by 30 degrees around its center point</h3>
      <div class="outer-line">
         <div id="box"></div>
      </div>
   </body>
</html>

示例 2:围绕元素的右下角旋转

在此示例中，我们使用 transform 属性将正方形旋转 30 度，然后将 transform-origin 属性设置为右下角。

<html>
<head>
   <style>
      body { text-align: center; }
      .outer-line {
         position: relative;
         height: 200px;
         width: 200px;
         margin: auto;
         padding: 5px;
         border: 4px solid #fbf;
      }
      #box {
         width: 100px; height: 100px;
         background-color: red;
         transform: rotate(30deg);
         transform-origin: bottom right;
         position: absolute;
         bottom: 50px;
         right: 50px;
      }
   </style>
</head>
   <body>
      <h3>The square is rotated by 30 degrees around its bottom-right corner</h3>
      <div class="outer-line">
         <div id="box"></div>
      </div>
   </body>
</html>

示例 3:旋转动画改变元素的基准位置

在此示例中，我们在容器中创建一个具有红色背景颜色的正方形，并使用position:absolute、top和left值设置其初始位置。我们还将其宽度和高度设置为 100px，然后使用 animation 属性应用名为 rotate 的关键帧动画。此动画运行 2 秒并无限重复。

最后，此动画创建了一个旋转效果，元素的基准位置从中心变为左上角，再变为右下角，最后又回到中心。

<html>
<head>
   <style>
      body { text-align: center; }
      .container {
         position: relative;
         height: 200px;
         width: 200px;
         margin: auto;
         padding: 5px;
         border: 4px solid #fbf;
      }
      .sqr {
         position: absolute;
         top: 50px;
         left: 50px;
         width: 100px;
         height: 100px;
         background-color: red;
         animation: rotate 2s infinite;
      }
      @keyframes rotate {
         0% {
            transform: rotate(0deg);
            transform-origin: center;
         }
         50% {
            transform: rotate(180deg);
            transform-origin: top left;
         }
         100% {
            transform: rotate(360deg);
            transform-origin: bottom right;
         }
      }
   </style>
</head>
   <body>
      <h3>Rotating animation that changes the element's base placement</h3>
      <div class="container">
         <div class="sqr"></div>
      </div>
   </body>
</html>