老版chrome/firefox需同时声明-webkit-transform、-moz-transform、-ms-transform及标准transform，ie9仅支持-matrix()且须tofixed(4)截断、避免-0，推荐用工具链生成或运行时dommatrix降级。
transform在老版Chrome/Firefox里不生效？加前缀不是万能的
老版本浏览器（比如 Chrome 30 以下、Firefox 30 以下）对 transform 的支持依赖厂商前缀，但只加 -webkit-transform 或 -moz-transform 往往不够——它们对某些值（如 rotateZ()、复合变换）解析不一致，甚至直接忽略。更麻烦的是，IE9 只支持 -ms-transform，且仅限于 matrix() 形式。
- 必须同时提供无前缀 + 各主流前缀版本，顺序为：
-webkit-transform→-moz-transform→-ms-transform→transform -
-ms-transform在 IE9 中不支持rotate(45deg)这类函数写法，必须转成matrix() - 多个变换叠加时（如
translateX(10px) rotate(30deg)），老浏览器可能只应用第一个，建议统一用matrix()落地
怎么把 rotate(30deg) translateX(20px) 转成兼容的 matrix()
手动算 matrix 系数容易出错，但没必要硬背公式：核心是理解二维仿射变换中，matrix(a,b,c,d,tx,ty) 对应的是：
⎡a c tx⎤ ⎢b d ty⎥ ⎣0 0 1⎦
旋转 + 平移的组合不能简单相加，得按「先旋转再平移」的顺序右乘矩阵。实际开发中推荐用工具链或小函数生成，而非手写。
- 用 clean-css 或 PostCSS 插件（如
postcss-transforms）自动补全前缀+降级 - 若需运行时动态计算，可用
DOMMatrix（现代）或降级到WebKitCSSMatrix（Safari/旧 Chrome） - IE9 下必须用
-ms-transform: matrix(0.866, 0.5, -0.5, 0.866, 20, 0)这种形式，注意第5/6位是平移像素值，不是百分比
transform: matrix() 在不同浏览器里的精度和取值差异
各浏览器对 matrix() 的浮点数截断策略不同：Chrome 可能保留 6 位小数，IE9 只认 4 位以内，超出会四舍五入导致偏移几像素；Safari 对负零（-0）处理异常，可能触发重绘 bug。
- 生成 matrix 时主动
toFixed(4)截断，避免0.999999999类似值 - 避免传入
-0，统一用0替代（例如matrix(1,0,0,1,-0,0)改成matrix(1,0,0,1,0,0)） - IE9 不支持
matrix3d()，哪怕写了也会静默失效，不要混用
要不要为 transform 单独写 IE9 降级样式？
要，但别只靠 CSS。因为 IE9 的 -ms-transform + matrix() 仅作用于块级元素，且不触发硬件加速，动画卡顿明显。单纯补前缀解决不了性能问题。
- 对非关键动效（如 hover 翻转卡片），直接给 IE9 用
filter: progid:DXImageTransform.Microsoft.Matrix(...)，但它只支持 2D，参数单位是「百万分之一弧度」，非常反直觉 - 更务实的做法是检测
window.CSS && CSS.supports('transform', 'rotate(1deg)')，不支持就切静态样式或 JS 模拟（如用top/left+position: absolute） - 务必测试真实设备上的重排行为：IE9 下频繁改
-ms-transform会强制同步 layout，比改left还慢
matrix 的系数推导和浏览器矩阵实现细节，很容易在调试时被当成“CSS 写错了”跳过——其实问题常出在小数精度、负零、或 IE9 对复合变换的静默截断上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
