css动画如何让元素旋转而不改变位置_使用transform: rotate和@keyframes实现旋转-css教程

旋转偏移因默认以左上角为原点，需设transform-origin: center；rotate()角度必须带单位如360deg；避免box-shadow、overflow:hidden等触发重排降级；动画优先级高于transition，推荐用animation而非混用。

旋转时元素位置偏移，是因为没设 transform-origin

默认情况下 transform: rotate() 以元素左上角为旋转中心，看起来像“飞出去”了。要让元素绕自身中心转，必须显式设置原点：

• transform-origin: center;（等价于 50% 50%）
• 如果元素有 margin 或 position: absolute，先确认其盒模型边界是否被意外拉伸
• 避免在旋转元素上同时用 top/left 动画，否则坐标系叠加会导致定位错乱

@keyframes 中 rotate() 的数值必须带单位

写成 rotate(90) 会失效，CSS 要求角度必须明确单位：

• 度数用 deg：例如 rotate(360deg)
• 弧度用 rad，但日常几乎不用
• 圈数用 turn：例如 rotate(1turn) 等价于 360deg
• 动画中从 0deg 到 720deg 是转两圈，不是“转到 720 度这个角度”

旋转动画卡顿？检查是否触发了重排

单纯用 transform: rotate() 是 GPU 加速的，但以下情况会让浏览器降级到 CPU 渲染：