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

在 CSS 中设置旋转元素的基本位置需要明白以下几个概念：旋转中心点、旋转角度、坐标系、transform-origin 属性。

旋转中心点

在 CSS 中旋转元素默认是以元素中心点为旋转中心点进行旋转的，但也可以通过设置 transform-origin 属性来改变旋转中心点的位置。

transform-origin: x-axis y-axis z-axis;

其中，x-axis 可以设置 left、center、right 三个值，表示在 X 轴上以 left 或 center 或 right 为基准点，y-axis 可以设置 top、center、bottom 三个值，表示在 Y 轴上以 top 或 center 或 bottom 为基准点，z-axis 可以设置 length 值或百分比值，表示在 Z 轴上相对位置。

旋转角度

旋转角度使用 transform 属性中的 rotate() 函数来设置，rotate() 函数的参数表示旋转角度，可以是度数、弧度、turn 等单位。度数以正数表示顺时针方向旋转，以负数表示逆时针方向旋转。

transform: rotate(deg);

坐标系

在 CSS 中，坐标系的原点在页面左上角，X 轴正方向向右，Y 轴正方向向下。旋转操作是以原点为中心进行的，因此如果要改变旋转中心点的位置，则需要对坐标系进行变换。

transform-origin 属性

transform-origin 属性用于指定旋转、缩放、移动等操作的变换中心点。默认情况下，旋转中心点是元素的中心点。

下面给出一个例子，设置一个红色矩形在上方水平居中，并以左侧为旋转中心点，绕旋转中心点逆时针旋转45度：

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -150%) rotate(-45deg);
  transform-origin: left center;
}

上述代码设置了宽高、背景颜色等基本样式，并通过 transform 属性的 translate() 和 rotate() 函数来进行平移和旋转操作。transform-origin 属性设置了旋转中心点为 left center，即以左侧中心位置作为旋转中心点。最终效果如下图所示：

参考链接：

• transform-origin 属性 | MDN
• CSS transform 详解 | MDN