转换的值相同，但顺序不同。为什么旋转度数不同？答案

【问题标题】：Same value of transformations but different order. Why the rotation degree is different?转换的值相同，但顺序不同。为什么旋转度数不同？
【发布时间】：2017-06-10 02:41:44
【问题描述】：

你可以看到相同的转换，唯一不同的是它们的顺序。

当它们的顺序不同时，旋转动画(360-0)%360deg。但是当它们的顺序相同时，旋转动画(360-0)deg。我知道我应该确保顺序和价值是相同的。但我想知道为什么不同的动画只发生在旋转上。这是怎么计算出来的？

.test {
  margin: 50px;
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 1s;
  transform: rotate(0) scale(.5);
}
/*css1*/

.test:hover {
  transform: scale(1) rotate(360deg);
}
/*css2*/

#btn:hover+.test {
  transform: rotate(360deg) scale(1);
}

<button id="btn">css2</button>
<div class="test">
  css1
</div>

Demo is here

【问题讨论】：

好问题！我已经稍微修改了我的答案，以删除答案不需要的额外部分。答案的症结仍然保持不变:)

标签： css css-transitions transform css-transforms

【解决方案1】：

顺序对于 CSS 转换非常重要。请查看 W3C 转换规范中 Interpolation of Transforms 部分中指定的四个点（尤其是第 4 点），然后查看 Interpolation of Matrices部分。

以下是无示例的变换插值部分的摘录（强调我的）：

在制作动画或转换变换时，必须对变换函数列表进行插值。对于第一个变换 from-transform 和第二个变换 to-transform 之间的插值，应用下面描述的规则。

如果 from- 和 to-transform 都没有：

不需要插值。计算值保持为无。

如果 from- 或 to-transforms 之一是 none。

值 none 被相应变换函数列表的等效恒等变换函数列表替换。两个变换函数列表都按照下一条规则进行插值。

如果 from- 和 to-transform 具有相同数量的变换函数，则每个变换函数对具有相同的名称，或者是相同原语的派生。

按照变换函数插值中的说明对每个变换函数对进行插值。计算的值是生成的变换函数列表。

在所有其他情况下：

每个变换函数列表的变换函数在 from-transform 和 to-transform 上得到后乘并转换为 4x4 矩阵。每个矩阵都按照矩阵插值中的说明进行插值。如果两个初始矩阵都可以用相关的 3x2 矩阵表示，则计算值为变换函数矩阵，否则为 matrix3d。

案例一：顺序不同

基于变换插值部分，我们的测试元素满足第 4 点，因为开始或结束变换值都不是无且它们不在相同的顺序 或者是相同原语的派生（也就是说，基本上，它们是不同类型的变换）。

因此，为默认状态和:hover 状态指定的变换被转换为矩阵，然后使用矩阵插值进行插值。

元素的默认变换是rotate(0) scale(0.5)，矩阵形式是matrix(0.5, 0, 0, 0.5, 0, 0)，修改后的变换是scale(1) rotate(360deg)，即matrix(1, 0, 0, 1, 0, 0)。正如您可以从Interpolation of Matrices 部分提供的示例中注意到的那样，关于一圈的信息会丢失，因为 360 度在矩阵表示中只不过是 0 度。因此元素只会增长，不会旋转。

案例2：订单相同

这很简单。正如您已经猜到的那样，它满足变换插值中的第 3 点，因此不会转换为矩阵。它是直接插值的。因此，rotate 变换的值不断地从 0 增加到 360，这与转换的持续时间及其计时函数一致。因此，除了生长效果外，我们还可以看到实际的旋转。

【讨论】：