为什么"转换"属性分组？

Question

具有属性似乎有点反直觉,这些属性本身就是关键:值对,被组合在一起.特别是因为它们中的大多数都是完全不同的,只要你知道如何写它,它们仍然可以同时使用.如果我不清楚我在说什么,我的问题是这个.为什么如下:

transform: rotate(40deg) scaleX(1,5) translate(-10px, 20px);

不是这样写的:

rotation: 40deg;
scaleX: 1.5;
translate: -10px 20px;

这样,每个属性都可以自己操作,而无需跟踪兄弟值.W3必须有一个很好的理由选择这种方法,有人知道吗？

Answer 1

那是因为变换不是可交换的.因此,订单很重要.

例如,如果在旋转后使用平移,则平移方向也将旋转.

.first::after {
  transform: rotate(180deg) translateX(50px);
}
.second::after {
  transform: translateX(50px) rotate(180deg);
}

body {
  display: flex;
  flex-direction: space-around;
}
div {
  height: 100px;
  width: 100px;
  border: 5px solid;
  margin: 25px auto;
}
div::after {
  content: 'Hello';
  display: block;
  height: 100%;
  width: 100%;
  background: yellow;
  opacity: .5;
}
.first::after {
  transform: rotate(180deg) translateX(50px);
}
.second::after {
  transform: translateX(50px) rotate(180deg);
}

<div class="first"></div>
<div class="second"></div>

使用不同的CSS属性,您无法选择所需的顺序.这是BoltClock提到的CSS Transforms level 2的限制,规范定义了一个订单,你无法改变它.