用 CSS transform: rotate() 可实现 HTML5 元素旋转，需带单位（如 deg），配合 @keyframes 和 animation 实现持续动画，JavaScript 可动态更新角度，transform-origin 控制旋转原点。
用 transform: rotate() 实现 HTML5 元素旋转
HTML5 本身不提供“动画 API”，旋转效果依赖 CSS 的 transform 和 animation 或 JavaScript 控制。最直接、兼容性最好的方式是用 CSS rotate() 函数，作用于任意块级或行内元素（需设 display: inline-block 或以上）。
常见错误是直接写 rotate(45) —— 缺少单位，浏览器会忽略；必须带单位，如 deg、rad、turn。
-
rotate(90deg)：顺时针转 90 度 -
rotate(-180deg)：逆时针转半圈 -
rotate(0.25turn)：四分之一圈，等价于90deg
让旋转动起来：CSS @keyframes + animation
静态旋转没意义，要动就得用 CSS 动画。关键不是“怎么写 rotate”，而是“怎么控制它循环、时长、是否暂停”。animation 属性是一组简写，漏掉某个值可能触发意外默认行为（比如默认 animation-iteration-count: 1，只转一次就停）。
下面是最小可运行的旋转动画示例：
立即学习“前端免费学习笔记（深入）”；
div.rotating {
width: 60px;
height: 60px;
background: #3498db;
animation: spin 2s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
注意：from/to 可替换为 0%/100%；linear 表示匀速，换成 ease-in-out 会有缓入缓出；infinite 才能持续转，否则默认只执行一次。
JavaScript 动态控制旋转角度（含实时更新）
如果需要响应用户操作（比如点击加速、拖拽调整角度、配合传感器），就得用 JS 修改 style.transform。直接赋值字符串比用 classList 更灵活，但要注意：每次设置都会覆盖整个 transform 值，若同时有 scale 或 translate 就会丢失。
- 安全写法：用
getComputedStyle(el).transform解析当前矩阵再叠加，但复杂；简单场景推荐用自定义数据属性存角度，再拼接 - 避免反复读写
offsetTop等触发重排，旋转本身是合成层操作，性能较好 - 不要用
setInterval模拟动画——改用requestAnimationFrame更流畅
例如点击增加 30 度：
let angle = 0;
const box = document.querySelector('.box');
box.addEventListener('click', () => {
angle += 30;
box.style.transform = `rotate(${angle}deg)`;
});
绕指定原点旋转？改 transform-origin
默认所有元素绕中心点旋转。想让它绕左上角、底部中点，甚至页面外某点转？必须调 transform-origin。它的值是坐标，支持像素、百分比、关键词，且顺序是 x y（不是 y x）。
-
transform-origin: 0 0→ 左上角 -
transform-origin: 100% 100%→ 右下角 -
transform-origin: center bottom→ 底部居中（关键词可混用） - 负值合法：
transform-origin: -20px -20px表示原点在元素左上方 20px 处
这个属性不影响渲染位置，只影响旋转/缩放的支点。调试时可在 DevTools 里实时修改，立刻看到变化。
真正麻烦的是 3D 旋转或需要兼容老 Android WebView 的场景——那些地方 rotateZ() 不一定生效，得 fallback 到 rotate() 并加 -webkit- 前缀。不过现在绝大多数环境，纯 CSS rotate() 加合理 transform-origin 就够用了。
