转换值相同，但顺序不同。为什么旋转度不同？
您可以看到相同的转换，唯一不同的是它们的顺序。
当它们的顺序不同时，旋转将动画(360-0)%360deg.But当它们的顺序是相同的，旋转将动画(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>
回答 1
Stack Overflow用户
发布于 2017-01-25 06:43:30
顺序在很大程度上关系到CSS转换。请查看变换插值部分中W3C转换规范(，特别是第4点)中指定的四个点，然后查看矩阵插值部分。
以下摘录自没有示例的变换部分的插值部分(重点为“地雷”)：
在动画或转换转换时，必须对转换函数列表进行内插。对于从-变换到第二变换到变换的一个变换和第二个变换之间的内插，应用下列规则。 如果from-变换和to-转换都为空：
- 不需要插值。计算值保持无。
如果从-或到-转换之一为无。
- 值none被对应的转换函数列表的等效身份转换函数列表替换。两个转换函数列表都按照下一个规则进行插值。
如果从-和到-转换具有相同数量的转换函数，则每个转换函数对要么具有相同的名称，要么是同一原语的导数。
- 如变换函数的插值所描述的那样，对每个变换函数对进行插值。计算值是得到的转换函数列表。
在所有其他情况下
- 变换函数列表中的变换函数在变换后得到后乘，被转换成4x4矩阵。每个矩阵都按照矩阵插值中的指令进行插值。如果两个初始矩阵都可以用相关的3x2矩阵和matrix3d表示，则计算值就是变换函数矩阵。
案例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)。正如您可以从矩阵插值部分提供的示例中注意到的，关于一个回合的信息会丢失，因为360 0deg只不过是矩阵表示中的0 0deg。因此，元素只会增长而不会旋转。
案例2:顺序相同
这很简单。正如您已经猜到的，它在变换的插值中满足点3，因此不被转换为矩阵。它直接内插。因此，rotate变换的值随着转换时间和时间函数的变化而从0增加到360。因此，除了生长效应，我们还可以看到实际的旋转。
https://stackoverflow.com/questions/41842764
复制相似问题
腾讯云开发者
