为什么 css 转换属性不是单独的 css 属性？答案

【问题标题】：Why css transform properties are not separate css properties?为什么 css 转换属性不是单独的 css 属性？
【发布时间】：2016-11-07 21:26:57
【问题描述】：

为什么决定将所有转换属性添加到一个 css 属性中？

代替：

.element {
    transform: translateX(50%) rotateZ(45deg) scale(0.8);
}

可以写成：

.element {
    translate-x: 50%;
    rotate-z: 45deg;
    scale: 0.8;
}

为什么选择第一个变体？这是否与转换矩阵有某种联系？还是前缀？

例如写media queries时，需要复制整个transform属性（不是DRY），否则会被覆盖。在创建转换、切换状态等时出现同样的问题......这真的很不舒服。

欢迎解释幕后发生的事情。

【问题讨论】：

第二个变种不存在。这完全是错误的。
@pol 我知道，我举了一个例子来说明如何更容易。
CSS Level 4 提出了将这些属性全部设为独立的建议。至于为什么他们不是从一开始就没有，你得问问 W3C。

标签： css css-transforms

【解决方案1】：

因为它不仅仅是一组属性，而是一个列表，其中按顺序应用转换，并且单个转换类型可以在列表中出现多次。

所以你可以例如这样做：

div {
  height:100px;
  width: 100px;
}
.one {
  background-color:red;
  transform:translate(50%,5%) scale(0.5)
    rotate(45deg) translate(50px,10px)
}
.two {
  background-color:blue;
  transform:scale(0.5) translate(50%,5%)
    rotate(45deg) translate(50px,10px)
}

<div class="one"></div>
<div class="two"></div>

您可以看到菱形的 X 位置受到应用变换顺序的影响。

【讨论】：