rotatez() 是 rotate3d() 绕 z 轴旋转的特例，等价于 rotate3d(0, 0, 1, angle)，适用于多数平面 ui 动画；rotate3d() 则支持任意单位向量轴的三维旋转，用于骰子翻滚等斜向或非 z 轴场景。
rotateZ() 和 rotate3d() 的本质区别
两者都做旋转，但 rotateZ() 是 rotate3d() 的特例：它等价于 rotate3d(0, 0, 1, angle)。也就是说，rotateZ() 只绕 Z 轴（垂直于屏幕）转，而 rotate3d(x, y, z, angle) 允许你指定任意方向的旋转轴——只要 (x, y, z) 是一个单位向量（实际浏览器会自动归一化，但非零向量才有效）。
为什么 rotateZ() 在多数动画中更常用
绝大多数 UI 动画需求是平面内旋转：按钮悬停旋转、加载图标自转、卡片翻牌前的预备动作……这些都不需要倾斜或透视扭曲，只需绕 Z 轴转。此时用 rotateZ() 更直接、可读性更强、调试更简单。
-
rotateZ(45deg)意图明确；写成rotate3d(0, 0, 1, 45deg)多了三个冗余参数，且容易误写成(0, 0, 0, 45deg)（无效，浏览器忽略） - 浏览器对
rotateZ()的优化更成熟，尤其在复合动画中，GPU 加速路径更稳定 - 配合
transform: rotateZ() translateX()这类组合时，各函数语义分离清晰；混用rotate3d()容易让 transform 链变得难维护
rotate3d() 真正该用的场景
只有当你需要「非 Z 轴」或「斜向旋转」时，rotate3d() 才不可替代。比如模拟骰子翻滚、3D 卡片翻转、或让元素沿某个倾斜轴自旋。
- 绕 X 轴翻转：用
rotateX(90deg)比rotate3d(1, 0, 0, 90deg)更简洁；但若想绕 (1, 1, 0) 这样的对角轴旋转，只能靠rotate3d() - 注意：
rotate3d()的前三项不是角度，而是方向向量分量；(1, 2, 0)和(0.5, 1, 0)效果一致（同方向），但前者更易读 - 如果没配
perspective或父容器没设transform-style: preserve-3d，rotate3d()可能看起来和rotateZ()一样——这是常见盲区
容易被忽略的兼容与调试细节
现代浏览器对两者支持都很完善，但老版本 Safari（iOS rotate3d() 的向量归一化处理有偏差；而 rotateZ() 几乎无兼容问题。
- Chrome DevTools 的 “Animations” 面板里，
rotateZ()显示为单一数值，rotate3d()则展开为四维参数，调试时信息密度更高但也更易看花眼 - 用 JavaScript 动态设置时，
element.style.transform = 'rotateZ(30deg)'比拼接字符串生成rotate3d()更安全，不易因小数精度或向量非法导致整个 transform 失效 - 真正复杂的 3D 动画，建议优先用
rotateX()/rotateY()/rotateZ()组合，而非硬套rotate3d()——后者更适合精确控制单次旋转轴，而不是构建多阶段动画
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
