CSS中translate独立属性和transform: translate()用法有区别吗？

translate: 50% 50% 并不是 transform: translate(50%, 50%) 的简写属性，它是CSS Transforms Level 2 规范新增的独立变换属性，和它同类的独立变换属性还有rotate、scale、skew等。

这类独立属性和transform中对应函数的核心差异除了语法更简洁外，还有两个关键区别：

• 修改单个变换规则时不需要重写整个transform属性：比如元素同时应用了位移、旋转、缩放三种变换，只需要修改位移值的话，直接调整translate属性即可，不需要像transform写法那样把三个变换函数重新写一遍
• 变换执行顺序固定：独立变换属性的执行顺序和属性书写顺序无关，固定为 translate → rotate → scale；而transform属性里的函数会按照书写顺序从左到右执行，顺序不同最终渲染效果完全不同

至于实际开发中很少见到这类独立属性的使用，主要有以下几个原因：

• 兼容性门槛高：这类属性属于较新的CSS特性，Chrome 104+、Firefox 103+、Safari 14.1才开始支持，绝大多数需要兼容低版本浏览器的项目都没法直接用
• 开发习惯惯性：从CSS变换特性推出以来的十几年里，行业通用写法都是transform加变换函数的形式，现有教程、开源项目、团队规范大多沿用旧写法，开发者也普遍形成了使用惯性
• 特性差异容易踩坑：很多开发者不清楚独立变换属性的固定执行顺序规则，和原有transform的顺序逻辑混用很容易出现不符合预期的效果，出于避坑考虑也会优先选择熟悉的写法
• 生态支持不足：很多旧版CSS预处理器、自动前缀工具、低版本UI组件库没有适配这类新属性，使用反而需要额外做兼容处理，提升了开发成本

内容的提问来源于stack exchange，提问作者H.B.