CSS3 transform属性格式为什么要这样设计？

Question

目前，CSS3 转换语法是这样设计的：

transform: translate(350px, -350px) rotate(360deg);

我只是好奇为什么不单独设计成这样:

translate: 350px, -350px;
rotate: 360deg;

或使用明确的前缀：

transform-translate: 350px, -350px;
transform-rotate: 360deg;

有人对此有想法吗？

Answer 1

如果删除可自定义的参数，它类似于其他 CSS property/value 对。例如：

transform: rotate;
transform: perspective;
transform: scale;

看起来更像其他常见的 property/value 对。例如：

display: block;
display: inline-block;
display: table;

不同之处在于某些 transform 的属性值接受参数来自定义它们。

令人困惑的是为什么多个转换不遵循其他 property/value 对所用的逗号分隔格式多个值。例如，要应用多个背景图像，您可以执行以下操作：

.class {
  background: background1, background 2, ..., backgroundN;
}

但 transform 使用 space 分隔格式：

transform: transform1() transform2() transform3() ... transformN();

这（对我来说）有意义的唯一原因是变换不是彼此独立的——相反，每个变换都作用于前一个变换。

Why is CSS3 transform attribute format designed like that?