transform: rotate() 实现旋转需配合 transition 或 @keyframes 才有动画效果；默认以中心为原点，可用 transform-origin 修改；持续旋转用 @keyframes 时起止值需闭环，如 to { transform: rotate(360deg); }；3D 旋转须设 transform-style: preserve-3d 和 perspective，并加 backface-visibility: hidden。
用 transform: rotate() 实现基础旋转
CSS 动画里的旋转，核心是 transform 函数中的 rotate()，它不依赖 @keyframes 也能直接使用，但要加动画效果就得配合 transition 或 @keyframes。
常见错误是只写 rotate(90deg) 却没设 transition，结果变成瞬时跳变，没有“动”的感觉。
-
rotate()的单位支持deg（度）、rad（弧度）、turn（圈，1turn = 360deg） - 默认以元素中心点为旋转原点，想改用
transform-origin控制，比如transform-origin: top left - 单独用
transform不触发重排，性能比改left/top好得多
用 @keyframes + animation 做持续旋转
需要无限转、匀速转、或控制节奏时，必须走 @keyframes 路线。关键点在于：起始帧和结束帧的 rotate() 值要形成闭环，否则动画会“弹回”。
比如想顺时针转一圈，别写 from { transform: rotate(0deg); } to { transform: rotate(360deg); } —— 浏览器可能优化成不动，应写成 to { transform: rotate(360deg); } 或明确用 100% { transform: rotate(360deg); }。
立即学习“前端免费学习笔记（深入）”；
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.rotating {
animation: spin 2s linear infinite;
}
animation-timing-function 对旋转观感的影响
旋转动画是否“自然”，很大程度取决于缓动函数。用 linear 是匀速，适合加载指示器；但做图标翻转、按钮反馈时，ease-in-out 或自定义 cubic-bezier() 更柔和。
特别注意：如果旋转同时伴随缩放或位移，不同缓动函数会让各变换的节奏错位，造成视觉割裂。
-
linear：适合机械感、仪表盘指针、loading 圈 -
ease-in：像从静止突然启动，适合“弹出式”旋转菜单 - 避免在
rotate()上滥用steps()，它会导致离散跳变，除非你真要做逐帧转盘效果
绕 Y 轴 3D 旋转时的坑：transform-style 和 perspective
想实现卡片翻面、立方体旋转这类 3D 效果，只写 rotateY(180deg) 不够。子元素默认扁平渲染，翻转后背面不可见，甚至整个元素“消失”。
必须在外层容器加 transform-style: preserve-3d，并在有 3D 变换的祖先上设 perspective（比如 perspective: 1000px），否则深度感为零，所有面挤在同一平面。
-
perspective写在父容器上，不是动画元素自身 -
backface-visibility: hidden要加在翻转元素上，防止背面内容透出 - 移动端 Safari 对
preserve-3d支持不稳定，复杂 3D 旋转建议降级为 2D 模拟
