css - CSS Animation\Transformation 中的旋转方向

Question

我试图理解 CSS 动画，但遇到了以下问题:

我有一个简单的 div，它在 CSS 中附加了动画，如下所示:

<div id="learn">LEARN</div>

#learn {
    width: 100px;
    height: 100px;
    background: blue;
    position: relative;
    animation: test1 5s ease-in 2s infinite;
}

案例一:

@keyframes test1 {
    0% {
        transform: rotate(179deg);
    }
    100% {
        transform: rotate(357deg);
    }
}

情况 2(0% 变换被分成 90+89 度而不是 179 度):

@keyframes test1 {
    0% {
        transform: rotate(90deg) rotate(89deg);
    }
    100% {
        transform: rotate(357deg);
    }
 }

为什么第一种情况是顺时针旋转，第二种情况是逆时针旋转？

Answer 1

这可能只是旋转变换的一个错误，我将在了解一些背景知识后解决。

背景

首先，旋转应该的工作方式与圆有关。如果您指定了度数，则元素将放置在由度数指定的旋转量决定的位置。当不为旋转设置动画时，有许多方法可以表示元素的位置。 Code Uniquely 在他们的评论中只说对了一半，因为 357 度和 -3 度的位置是相同的，但是在制作动画时，它们非常不同。从 0 度到 -3 度是一个小的逆时针旋转，而从 0 度到 357 度是一个大的顺时针旋转。

调查结果

您发现的内容似乎忽略了此计算(在我测试过的 Firefox 和 Chrome 中)。据我所见，结合 rotate 转换有效地反转了旋转应该的方向，即使你结合了 0deg旋转:

transform: rotate(90deg); //rotates clockwise
transform: rotate(0deg) rotate(90deg); //rotates counter-clockwise

看来您可以通过“组合”两个动画步骤中的旋转变换来解决此问题:

// this performs a clockwise rotation
@keyframes test3 {
    0% {
        transform: rotate(0deg) rotate(90deg);
    }    
    100% {
        transform: rotate(0deg) rotate(357deg);
    }
}

最后，“组合”的数量似乎很重要。如果您在一个步骤中组合 2 个旋转，但在另一个步骤中组合 3 个，则会发生意外行为:

// rotates counter-clockwise since there are unequal rotation transforms
@keyframes test4 {
    0% {
        transform: rotate(0deg) rotate(0deg) rotate(90deg);
    }
    100% {
        transform: rotate(0deg) rotate(357deg);
    }
}

结论

这可能不是最好的答案，但似乎没有任何地方记录过像这样组合旋转。我建议不要组合相同的 rotate 转换(你仍然可以组合 rotateX 和 rotateY 而没有这种奇怪的情况)并坚持使用度数的总和值(value)观。

如果发现此解释的任何人可能想比我更了解此行为，这里有一个 fiddle以上述示例为起点。