如何使用 CSS 旋转元素？

在 CSS 中，可以使用 transform 属性来旋转元素。旋转可以通过指定度数、弧度、梯度或角度的方式来实现。另外，可以通过设置 transform-origin 属性来指定旋转的中心点。

旋转元素的语法

以下是旋转元素的语法：

transform: rotate(angle);

其中，angle 可以通过以下方式指定：

• 指定角度值，如 rotate(45deg)
• 指定弧度值，如 rotate(0.7854rad)
• 指定梯度值，如 rotate(50grad)
• 指定角值，如 rotate(0.25turn)

旋转元素的实例

以下是旋转元素的实例：

/* 指定角度值 */
.rotate-45deg {
  transform: rotate(45deg);
}

/* 指定弧度值 */
.rotate-1rad {
  transform: rotate(1rad);
}

/* 指定梯度值 */
.rotate-50grad {
  transform: rotate(50grad);
}

/* 指定角值 */
.rotate-90deg {
  transform: rotate(0.25turn);
}

指定旋转中心点

默认情况下，元素是以其中心点作为旋转中心点进行旋转的。但是，可以通过设置 transform-origin 属性来指定旋转中心点。

以下是指定旋转中心点的语法：

transform-origin: x-position y-position;

其中，x-position 和 y-position 可以采用以下单位：

• px
• %
• top
• right
• bottom
• left
• center

以下是指定旋转中心点的实例：

/* 指定旋转中心点为元素右上角 */
.rotate-topright {
  transform-origin: right top;
}

/* 指定旋转中心点为元素中心点 */
.rotate-center {
  transform-origin: center;
}

以上就是使用 CSS 旋转元素的相关介绍。