css - 为什么 "transform"属性被分组？

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 属性，您无法选择您想要的顺序。这是 CSS Transforms level 2 的限制那BoltClock mentioned , 规范 defines an order你无法改变它。