CSS Animation\Transformation中的旋转方向

Question

关于CSS Animation\transform的疑问.我试图理解CSS动画并遇到以下问题:

一个简单的div,动画在CSS中附加到它,如下所示

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

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

情况1 :

   @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没有这种奇怪的情况）并坚持使用度值的总和。

如果有人发现这个解释可能比我想了解更多关于这种行为的信息，这里以上面的例子为起点。