translatex()/translatey()可单独控制方向位移，百分比值参照元素自身宽高（非父容器），行内元素需设display:block/inline-block才生效，单位须统一且不可混用，负值反向移动。
translate 单独控制位移时要注意单位和参照系
单独用 translateX() 或 translateY() 比写 translate(x, y) 更可控，尤其当只动一个方向时。但必须注意：百分比值是相对于元素**自身宽高**计算的，不是父容器——比如 translateX(50%) 是向右移动自己宽度的一半，不是父盒子宽度的一半。
常见错误现象：translateX(100%) 在子元素上没反应？大概率是因为该元素是行内标签（如 span），transform 对纯行内元素默认无效，得先加 display: inline-block 或 block。
- 像素值（
px）最直观，适合固定距离偏移 - 百分比值适合响应式场景，但需确认元素尺寸稳定
- 负值合法，
translateX(-20px)向左移 20px，translateY(-50%)向上移自身高度一半 - 不要混用单位写法，
translateX(10px, 20%)是非法语法，translateX只接受单个值
rotate 必须带单位 deg，且旋转中心默认在元素中心
rotate() 只接受角度值，且**必须带单位 deg**，写成 rotate(45) 或 rotate(45rad) 都不会生效（除非你真用了弧度且启用了 rad 单位，但极少见）。顺时针为正，逆时针为负。
容易被忽略的是旋转原点：rotate() 默认绕元素中心点转。如果想绕左上角转，得配合 transform-origin，比如 transform-origin: top left;。这个设置要写在同一个元素的样式里，且必须在 rotate() 之前声明才可靠（CSS 层叠顺序影响最终效果）。
- 常用值：
rotate(90deg)、rotate(-180deg)、rotate(360deg) - 动画中高频使用，但注意连续旋转如
rotate(720deg)和rotate(0deg)视觉一样，浏览器可能优化掉中间过程 - 若与其他变换复合（如先
scale再rotate），执行顺序会影响结果——CSS 从右往左解析transform值
scale 单独缩放宽或高时，别误用 scaleZ
想只拉宽不拉高？用 scaleX(1.5)；只压扁高度？用 scaleY(0.6)。这两个函数互不影响，也最常用。但注意：scaleZ() 是 3D 变换，必须配合 transform-style: preserve-3d 和父容器有景深（如 perspective）才可见效果，纯 2D 场景下写 scaleZ(2) 完全无反应。
缩放会连带影响子元素和 transform-origin 的位置计算——比如先 scale(0.5) 再 translateX(100px)，实际位移是 50px（因为坐标系被缩了）。所以顺序很关键。
-
scale(1)是原始大小，scale(0)会让元素“消失”（但仍在文档流中） -
scale(-1)会镜像翻转，常用于翻牌或切换图标朝向 - 百分比缩放不存在，
scale(50%)是非法写法，只能用小数或整数：scale(0.5)
复合写法中 transform 执行顺序决定视觉结果
CSS 解析 transform 值是从右往左执行的。例如 transform: rotate(30deg) translateX(100px) scale(0.8); 实际执行顺序是：先 scale(0.8)，再 translateX(100px)（此时 100px 是缩放后的坐标系），最后 rotate(30deg)。这个顺序一旦写错，位移或旋转就会“漂移”。
调试时建议分步验证：先只留一个变换，确认行为符合预期，再叠加下一个。特别是 translate 放在 scale 后面时，位移距离会被缩放系数“打折”，这点在做 hover 动画或精确对齐时最容易踩坑。
- 避免把多个独立
transform声明写在不同 CSS 规则里，浏览器只会取最后一个声明，前面的会被覆盖 - 要用动画，
transition必须加在被变换的元素本身上，而不是父级 - 如果涉及频繁重绘（如滚动中触发），
transform仍比top/left性能好，但过度嵌套或层级过深的transform也可能触发层合成开销
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
