rotate() - 旋转变换

语法说明

transform: rotate(angle);

• angle - 旋转角度
• deg（度）：最常用，360deg = 一圈
• turn（圈）：1turn = 360deg，0.5turn = 180deg
• rad（弧度）：2π rad = 360deg ≈ 6.28rad
• 正值：顺时针旋转
• 负值：逆时针旋转

示例 1：顺时针旋转 45 度

rotate(45deg) 将元素顺时针旋转 45 度

.box {
  transform: rotate(45deg);
  /* 顺时针旋转 45 度 */
}

示例 2：完整旋转一圈

rotate(360deg) 或 rotate(1turn) 旋转一整圈

.box {
  transform: rotate(360deg);
  /* 等价于 rotate(1turn) */
}

示例 3：逆时针旋转

使用负值进行逆时针旋转

.box {
  transform: rotate(-90deg);
  /* 逆时针旋转 90 度 */
}

示例 4：改变旋转中心点

使用 transform-origin 可以让元素围绕不同的点旋转

/* 围绕左上角旋转 */
.box-left {
  transform-origin: top left;
  transform: rotate(90deg);
}

/* 围绕中心旋转（默认） */
.box-center {
  transform-origin: center; /* 或 50% 50% */
  transform: rotate(90deg);
}

/* 围绕右下角旋转 */
.box-right {
  transform-origin: bottom right;
  transform: rotate(90deg);
}