为什么要对“转换”属性进行分组？答案

【问题标题】：Why are "transform" properties grouped?为什么要对“转换”属性进行分组？
【发布时间】：2016-04-12 00:46:02
【问题描述】：

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

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

不是这样写的：

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

这样每个属性都可以单独操作，而无需跟踪兄弟值。 W3 选择这种方法一定有充分的理由，所以有人知道吗？

【问题讨论】：

他们正在“解组”他们……为什么……因为他们犯了错误……wiki.csswg.org/ideas/mistakes

标签： css css-transforms

【解决方案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，你不能改变它。

【讨论】：

这也是真的。看看所有这些新属性如何相互作用会很有趣。
@BoltClock 在Current Transformation Matrix 中定义。规范定义了转换的顺序，你不能改变它。当前的transform 属性似乎更强大。

【解决方案2】：

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

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

【讨论】：

【解决方案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>

【讨论】：