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;
}

情況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沒有這種怪事），並堅持使用程度值的總和。

萬一發現這個解釋的人可能想比我更了解這種行為，這里有一個以上面的例子為起點的小提琴。