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

Is there a difference between using `transform: translate(...` and `translate: ...`?

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

我试图搜索它但找不到任何东西。 rotate 和其他转换属性可能也是如此

如果它是 shorthand,为什么没有人使用它(我从来没有遇到过使用它的代码。)

translate(以及rotatescale)的属性目前仅出现在CSS Transforms Module Level 2, Editor’s Draft, 16 June 2021 under the section 5. Individual Transform Properties: the translate, scale, and rotate properties:

The translate, rotate, and scale properties allow authors to specify simple transforms independently, in a way that maps to typical user interface usage, rather than having to remember the order in transform that keeps the actions of translate(), rotate() and scale() independent and acting in screen coordinates.

重要的部分为什么建议它 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+

Oh, so that why no body uses it. Pretty useless!

这不一定是真的,如果它可以翻译成另一个 css 属性,那么如果您的开发链中有 postcss.org 这样的工具,那么您今天就可以使用它, 如果 postcss 有翻译插件。

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