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

Question

我在CSS中注意到了这一点。您可以直接使用（例如）

translate: 50% 50%

代替

transform: translate(50%, 50%)

。前者是后者的简写吗？.

我试图寻找它，但找不到任何东西。 对于

rotate

来说也是同样的事情，并且可能对于其余的变换属性

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

Answer 1

translate

（以及

rotate

和

scale

）的属性目前仅出现在第5部分下的CSS转换模块级别2，编辑草稿，2021年6月16日中。单独的变换属性：平移、缩放和旋转属性:

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）不太好约为89.49％（2023-09-25）：FF 72+和Safari 14.1+，iOS Safari 14.5+

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

这不一定是真的，如果它可以翻译为另一个 css 属性，那么如果您的开发链中有像 postcss.org 这样的工具，并且

postcss

有一个用于翻译它的插件，那么您今天就可以使用它.

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