标签：rotate

rotate()

CSS `rotate()` 函数是 `transform` 属性的一个核心功能，用于在二维平面内对元素进行旋转。其基本语法为 `rotate()`，接受一个角度参数。正值使元素顺时针旋转，负值则使其逆时针旋转。该角度支持四种单位：度（deg）、梯度（grad）、弧度（rad）和圈数（turn），为开发者提供了灵活的控制方式。 默认情况下，元素围绕其中心轴旋转。通过设置 `transform-origin` 属性，可以指定自定义的旋转中心点，这是实现复杂变换效果的关键。 该函数的应用场景广泛，常用于创建交互动画。例如，在手风琴控件中，通过将“+”号图标旋转45度可将其变为“×”号。在汉堡菜单里，利用旋转配合位移可将三条横线变为关闭的“×”图标。它也常与 `@keyframes` 结合，制作旋转的加载指示动画。此外，还可以用于实现静态的视觉设计，如垂直旋转的文本标签。