Question

对CSS Animation \ transform的疑问。我正在尝试理解CSS动画并遇到以下问题：

在CSS中附加动画的简单div，如下所示

   <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

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

<强>背景

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

<强>首饰

您发现的内容似乎忽略了这一计算（在我测试过的Firefox和Chrome中）。从我所看到的情况来看，即使您要与rotate组合，0deg变换组合也会有效地逆转旋转应该进入的方向。旋光度：

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

似乎你可以通过＆＃34;结合＆＃34;来解决这个问题。旋转在两个动画步骤中转换：

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

最后，似乎＆＃34;组合的数量＆＃34;事项。如果您在一个步骤中组合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组合在一起而不会出现这种奇怪现象）并坚持使用度数值的总和。

如果发现此解释的任何人想要了解更多关于此行为的信息，请参阅上面的示例fiddle作为起点。

CSS Animation \ Transformation

1 个答案: