相册卡顿或跳帧是因为@keyframes中0%和100%的rotate值不严格一致，如单位缺失、四舍五入误差或轴向定义不全；必须统一用rotate3d并确保起止角度匹配，且preserve-3d须加在子元素共同父容器上并配合perspective。
用 @keyframes 定义无限旋转动画时，为什么相册会“卡顿”或“跳帧”？
关键在动画关键帧的起止状态是否严格一致。如果 0% 和 100% 的 transform: rotateX() rotateY() rotateZ() 值不完全匹配（比如用了不同单位、四舍五入误差、或混用 deg 与 rad），浏览器会插值失败，导致最后一帧突然回跳。
- 动画必须从
0deg开始，到360deg结束（不能写成0和360不带单位） - 所有旋转轴必须同时定义，避免某轴在
0%有值、100%缺失（例如漏掉rotateZ(0)） - 推荐统一用
rotate3d(x, y, z, angle)替代多个rotateX/Y/Z，更可控
@keyframes spin3D {
0% { transform: rotate3d(1, 1, 0.3, 0deg); }
100% { transform: rotate3d(1, 1, 0.3, 360deg); }
}
让每张图片在3D空间中“站”成环形，transform-style: preserve-3d 必须加在哪？
它必须加在所有子元素（即每张图）的共同父容器上，且该容器自身要有明确的 transform（如 perspective 或 transform: rotateX()），否则子元素的 3D 位置会被拍平。
- 错误：只给
img元素加preserve-3d（无效，该属性不作用于img） - 正确：给包裹所有
img的ul或div加transform-style: preserve-3d - 同时，这个父容器必须设
perspective: 1200px（值太小会畸变，太大则看不出深度）
每张图用 position: absolute + transform: rotateY(...deg) translateZ(300px) 排列成环——translateZ 是半径，rotateY 控制角度间隔。
animation-timing-function: linear 被忽略？检查是否被 transform 中的其他函数覆盖
常见陷阱：给图片容器同时写了 transform: rotateY(...) translateZ(...) 和 animation: spin3D 20s infinite linear，但动画本身也在改 transform，造成两个 transform 声明冲突，后者被前者覆盖。
- 只能有一个
transform源头：要么动画控制整体旋转，要么 JS 控制，不能混用 - 如果要用 CSS 动画驱动整个相册转，就不要在图片上写静态
transform（比如rotateY(30deg)），而应把环形布局逻辑写进动画关键帧里，或用伪类+定位预排布，再让外层容器动
更稳妥的做法：环形排布用绝对定位 + 静态 transform 完成；无限旋转只作用于外层容器，且该容器的 transform 仅含动画所需的 rotate3d，不叠加其他变换。
移动端触摸拖拽中断自动旋转，如何平滑接管？
纯 CSS 无法监听拖拽并暂停/恢复动画，必须用 JS。但直接 element.style.animationPlayState = 'paused' 会导致瞬间停顿，视觉割裂。
- 监听
touchstart，记录当前getComputedStyle(el).animationDuration和已运行时间（可用performance.now()差值估算） - 暂停后，用
requestAnimationFrame手动更新transform，模拟拖拽位移 - 松手后，把拖拽产生的偏移量折算成旋转角度，再以该角度为起点重启 CSS 动画（需动态重写
@keyframes或用animation-delay调相）
真正难的不是旋转本身，而是让「自动转」和「手动拖」在角度、速度、缓动曲线上无缝衔接——绝大多数人卡在这里，最后退回到只做自动循环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
