使用 `transform: translate(...` 和 `translate: ...` 有区别吗？

Question

我在 css 中注意到了这一点。您可以直接使用（例如）translate: 50% 50% 而不是 transform: translate(50%, 50%)。前者是后者的简写吗？

我试图搜索它，但找不到任何东西。 rotate 和其他转换属性可能相同

如果它是速记，为什么没有人使用它（我从未遇到过使用它的代码。）

Answer 1

translate（和rotate，和scale）的属性目前只出现在CSS Transforms Module Level 2, Editor’s Draft, 16 June 2021中5. Individual Transform Properties: the translate, scale, and rotate properties部分下：

translate、rotate 和 scale 属性允许作者以映射到典型用户界面使用的方式独立指定简单的转换，而不必记住 transform 中保持translate()、rotate() 和 scale() 的动作独立并作用于屏幕坐标。

建议使用 in a way that maps to typical user interface usage, rather than having to remember the order in transform 的重要部分，因此应该更容易将其用于最常见的用例。

支持 (caniuse.com: translate) 不是很好 FF 72+ 和 Safari 14.1+, iOS Safari 14.5+

哦，这就是为什么没有人使用它。太没用了！

不一定是这样，如果它可以翻译成另一个 css 属性，那么如果你的开发链中有 postcss.org 这样的工具，并且如果 postcss 有翻译它的插件，那么你今天已经可以使用它了.

但目前仅在规范草案中的内容是否真的会进入最终版本并不总是很清楚。