为什么 CSS3 转换属性格式是这样设计的？答案

【问题标题】：Why is CSS3 transform attribute format designed like that?为什么 CSS3 转换属性格式是这样设计的？
【发布时间】：2015-12-07 16:53:42
【问题描述】：

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

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

我只是好奇为什么它不是这样单独设计的：

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

或者带有明确的前缀：

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

有人对此有想法吗？

【问题讨论】：

【解决方案1】：

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

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

看起来更像其他常见的属性/值对。例如：

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

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

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

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

但transform 使用空格分隔的格式：

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

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

【讨论】：