CSS 如何设置旋转元素的基本位置

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

CSS中的Transform属性

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

旋转、缩放、倾斜和平移是Transform属性的子属性。在这里，我们将专注于旋转子属性。旋转属性允许围绕页面上的固定点旋转元素。

CSS中的元素旋转

要在CSS中旋转元素，可以使用transform属性与rotate()函数。

语法

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

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

例如，以下代码将使元素旋转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>