Question

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

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

.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转换非常重要 。请查看W3C转换规范{<3>}部分中指定的四个点（ 尤其是第4点 ），然后查看{ {3}}部分。

以下是“变换插值”部分的摘录，没有示例（强调我的）：

动画或转换变换时，必须插入变换函数列表。对于从变换到第二变换到变换的一个变换之间的插值，应用下面描述的规则。

如果from和to-transform都不是：


无需插值。计算出的值保持不变。


如果其中一个来自或转换为无。


值none由相应转换函数列表的等效标识转换函数列表替换。两个变换函数列表都按照下一个规则进行插值。


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


如变换函数的插值中所述，对每个变换函数对进行插值。计算出的值是生成的转换函数列表。


在所有其他情况下 ：


每个转换函数列表的 转换函数 在from-和to-transform get post上相乘， 转换为4x4矩阵 即可。根据矩阵的插值中的指令对每个矩阵进行插值。如果两个初始矩阵都可以用相关的3x2矩阵和矩阵3来表示，则计算出的值是变换函数矩阵。

案例1：订单不同

基于“变换的插值”部分，我们的测试元素 满足第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 Transforms部分提供的示例中看到的那样，关于一转的信息会丢失，因为360deg只是矩阵表示中的0deg。因此，元素只会生长并且不会旋转。

案例2：订单相同

这非常简单。正如您所猜测的那样，它满足变换插值中的第3点，因此不会转换为矩阵。它是直接插值的。因此，rotate变换的值随着转换的持续时间及其定时功能而不断地从0递增到360。因此，除了生长效应之外，我们还可以看到实际的旋转。

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

1 个答案:

案例1：订单不同

案例2：订单相同