使用CSS的transform属性配合rotate函数可实现元素围绕指定中心点的角度旋转，rotate(angle)以deg、rad等单位定义旋转角度，正值顺时针、负值逆时针，并可通过transform-origin自定义旋转原点位置，还可与scale、translate等函数组合使用实现复杂动画效果。
如果您在使用CSS进行元素的视觉变换时，发现需要让元素围绕某个中心点进行角度旋转，可以利用CSS中的transform属性配合rotate函数实现这一效果。以下是关于rotate函数的具体说明和使用方法：
本文运行环境：MacBook Pro，macOS Monterey
一、rotate函数的基本概念
rotate函数是CSS transform属性中的一个功能函数，用于将元素围绕其原点（默认为元素中心）按指定的角度进行二维平面旋转。旋转的角度值以度（deg）为单位，正值表示顺时针旋转，负值表示逆时针旋转。
例如，transform: rotate(45deg) 表示将元素顺时针旋转45度。
二、rotate函数的语法结构
rotate函数的语法格式为：rotate(angle)，其中angle是必须参数，表示旋转的角度，可以使用deg（度）、rad（弧度）、grad（梯度）或turn（圈数）作为单位。
1、使用度作为单位：transform: rotate(90deg)，表示旋转四分之一圈。
2、使用弧度作为单位：transform: rotate(0.5turn)，表示旋转半圈。
3、使用负值实现反向旋转：transform: rotate(-30deg)，表示逆时针旋转30度。
三、改变旋转中心点
默认情况下，rotate函数以元素的中心点为旋转轴心，但可以通过transform-origin属性自定义旋转原点，从而控制旋转的基准位置。
让 macOS 自动化像说话一样简单 —— 用代码控制你的 Mac，无需学习 AppleScript 系统要求 macOS 14+ (Sonoma) Python 3.9+ 需要开启：辅助功能 + 屏幕录制权限
1、将旋转中心设置为左上角：transform-origin: top left。
2、将旋转中心设置为右侧中点：transform-origin: right center。
3、使用具体坐标值设定原点：transform-origin: 20% 50%，表示横轴20%，纵轴50%的位置。
四、与其他变换函数组合使用
rotate函数可以和其他transform函数（如translate、scale、skew等）联合使用，实现复杂的视觉效果。多个函数之间用空格分隔。
1、同时进行旋转和缩放：transform: rotate(45deg) scale(1.2)。
2、先平移再旋转：transform: translateX(50px) rotate(90deg)，注意顺序会影响最终效果。
3、组合多种变换创建动态效果，在动画关键帧中尤为常见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
