为什么要对 "transform" 个属性进行分组？

Question

将本身是 key:value 对的属性组合在一起似乎有点违反直觉。特别是因为它们中的大多数都非常不同并且只要您知道如何编写它们仍然可以同时使用。如果不清楚我在说什么，我的问题是这个。为什么是下面的：

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

不是这样写的：

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

这样每个属性都可以自己操作，而不必跟踪同级值。 W3 选择这种方法肯定有充分的理由，所以有人知道吗？

Answer 1

CSStransform属性起源于 SVG 转换，其中以 space 分隔的转换函数列表作为 SVG [=10 的值提供=] 属性。 CSS transform 属性很可能是它的直接端口。

当然，事后证明这是一个可怕的错误，转换函数将在 CSS Transforms level 2 中提升为它们自己的 CSS 属性，几乎与您提出的语法完全相同（还没有单独的 scaleX/Y/Z 属性）。它们与 transform 属性的相互作用被考虑在内，尽管草案指出转换矩阵将被更改以适应新属性如何与级联相互作用。

Answer 2

那是因为变换不可交换。因此，顺序很重要。

例如旋转后使用平移，平移方向也会旋转。

.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 that , the spec defines an order 的限制，您无法更改它。

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>

为什么要对 "transform" 个属性进行分组？

Why are "transform" properties grouped?

css

css-transforms