css - 相同的转换值但不同的顺序。为什么旋转度数不同？

Question

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

当它们的顺序不同时，rotate 将动画 (360-0)%360deg。但是当它们的顺序也相同时，rotate 将动画 (360-0 )度。我知道我应该确保顺序和值(value)相同。但我想知道为什么不同的动画只发生在旋转时。这是如何计算的？

.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

Answer 1

顺序在很大程度上对 CSS 转换很重要。请看一下Interpolation of Transforms中规定的四点W3C 转换规范部分(尤其是第 4 点)，然后查看 Interpolation of Matrices部分。

下面是转换插值部分的摘录，没有示例(强调我的):

When animating or transitioning transforms, the transform function lists must be interpolated. For interpolation between one transform from-transform and a second transforms to-transform, the rules described below are applied.

If both the from- and to-transform are none:

• There is no interpolation necessary. The computed value stays none.

If one of the from- or to-transforms is none.

• The value none is replaced by an equivalent identity transform function list for the corresponding transform function list. Both transform function lists get interpolated following the next rule.

If from- and to-transform have the same number of transform functions, each transform function pair has either the same name, or is a derivative of the same primitive.

• Interpolate each transform function pair as described in Interpolation of transform functions. The computed value is the resulting transform function list.

In all other cases:

• The transform functions of each transform function list on the from- and to-transform get post multiplied and converted into 4x4 matrices. Each of the matrices gets interpolated following the instructions in Interpolation of matrices. The computed value is the transform function matrix if both initial matrices can be represented by a correlating 3x2 matrix and matrix3d otherwise.

---

案例一:顺序不同

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

因此，为默认和 :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。因此，除了增长效果之外，我们还可以看到实际的旋转。