为什么“转换”属性分组？

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);
}

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用不同的CSS属性，您无法选择所需的顺序。这是[{3}} CSS Transforms level 2的限制，BoltClock mentioned规范defines an order并且您无法改变它。

Answer 2

CSS transform属性源自SVG变换，其中以空格分隔的变换函数列表作为SVG transform属性的值提供。 CSS transform属性很可能是该端口的直接端口。

当然，后见之明已经证明这是一个可怕的错误，转换函数将被提升为CSS Transforms level 2中自己的CSS属性，几乎就是你提出的确切语法（没有＆＃39;个人scaleX / Y / Z属性）。考虑到它们与transform属性的交互，但草案指出转换矩阵将被更改以适应新属性与级联相互作用的方式。

Answer 3

我同意个人选项会很好，因为你可以用Javascript轻松操作它们。不是这种情况的可能原因是声明的顺序与transform一致。旋转元素等时，元素移动的轴会发生变化。

/* Transform */

.translate {
  transform: translateX(200px) rotateZ(90deg);
}
.rotate {
  transform: rotateZ(90deg) translateX(200px);
}

/* Demo */

div {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-bottom: 10px;
  position: relative;
}
div.translate:before {
  position: absolute;
  display: block;
  content: '';
  width: 100px;
  height: 200px;
  top: 100px;
  left: 0;
  border:2px dashed #333;
  border-top:none;
  box-sizing:border-box;
}
div.rotate:before {
  position: absolute;
  display: block;
  content: '';
  width: 200px;
  height: 100px;
  top: 0;
  left: -200px;
  border:2px dashed #333;
  border-right:none;
  box-sizing:border-box;
}

<div class="translate">
</div>
<div class="rotate">
</div>