使用css transform属性的rotate()函数可实现元素旋转，如transform: rotate(45deg)表示顺时针旋转45度，支持deg、rad、turn单位，配合transform-origin可修改旋转中心点，结合transition可实现平滑动画效果，常用于悬停交互或视觉特效。
要让一个html元素旋转，可以使用CSS的 transform 属性配合 rotate() 函数。这个方法不会影响页面布局，只在视觉上改变元素的方向。
基本语法
transform: rotate(角度);
角度单位可以是：
- deg：度数（常用），如 90deg、180deg、-45deg
- rad：弧度，如 0.5rad
- turn：圈数，如 0.25turn 相当于 90deg
常见用法示例
给一个 div 元素顺时针旋转 45 度：
.box {
transform: rotate(45deg);
}
逆时针旋转 30 度：
立即学习“前端免费学习笔记（深入）”；
.box {
transform: rotate(-30deg);
}
旋转 180 度，常用于翻转图标或内容：
.flip {
transform: rotate(180deg);
}
设置旋转中心点
默认情况下，元素围绕其中心点（50% 50%）旋转。你可以用 transform-origin 修改旋转原点：
- rotate around top-left: transform-origin: 0 0;
- rotate around bottom-right: transform-origin: 100% 100%;
- rotate around top center: transform-origin: 50% 0;
结合过渡实现动画效果
如果你想让旋转有平滑动画，可以加上 transition：
.box {
transform: rotate(0deg);
transition: transform 0.3s ease;
}
.box:hover {
transform: rotate(90deg);
}
这样鼠标悬停时，元素会顺滑地旋转 90 度。
基本上就这些。掌握 rotate 和 transform-origin，就能灵活控制元素的旋转方向和支点。不复杂但容易忽略细节，比如单位写错或忘记加 deg 单位会导致无效。调试时注意检查拼写和单位。