CSS Animation\Transformation 中的旋转方向

Posted 2023-03-06

【中文标题】CSS Animation\\Transformation 中的旋转方向

【英文标题】：Direction of rotation in CSS Animation\TransformationCSS Animation\Transformation 中的旋转方向

【发布时间】：2015-10-24 19:44:38

【问题描述】：

我正在尝试理解 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);
    
 

为什么第一个表壳顺时针旋转，第二个表壳逆时针旋转？

【问题讨论】：

我相信它的旋转方向是圆的开始值和结束值之间夹角最小的方向（357 显然是 -3 度）

我不确定我是否明白你的意思。两种情况下较小的角度都是顺时针方向。

您使用的浏览器是什么版本？我在 Chrome v38（旧但仍然）上，两个版本都顺时针旋转。

我用的是火狐。它是最新的。

【参考方案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 而不会出现这种奇怪现象）并坚持使用度数的总和。

如果发现此解释的人可能比我想了解更多有关此行为的信息，这里有一个fiddle，上面的示例作为起点。

【讨论】：

实际上，我在尝试理解通过多次转换实现的“漂浮在水中”行为时观察到了这一点。下面的关键帧给人一种非常好的“浮动”感觉，只有很少的 css 行。我不知道如何！ 0% transform: rotate(0deg) translateX(0) translateY(1px) rotate(0deg) 100% transform: rotate(360deg) translateX(0) translateY(1px) rotate(-360deg) 我可以理解向下漂移 ....但不确定它是如何从左到右移动的

这实际上是一个非常巧妙的技巧。 CSS3 中的transforms 有一个有趣的机制，可以根据先前的翻译将rotate 应用到不同的轴心点（所以基本上，变换各部分的顺序在最终动画的外观中起着重要作用）。看看这个updated fiddle 看看我的意思。第一个 div 以它的中心旋转，第二个基于translateX 旋转，第三个基于translateX 和translateY，最后一个是没有额外移动的第三个（在 Chrome 中测试）

很高兴看到这个。但我猜 div2 和 div3 之间的行为差​​异是因为 div2 中 100% 状态的“净”旋转是 360 度，因此它也可以在自己的轴上旋转。 div3 中 100% 的净旋转为 0 度。所以没有轴向旋转。但话又说回来，为什么“整个 div”会沿着螺旋路径到达最终状态？

拥有四类“风向”（东、南、西、北）和相应的 css 类，用户可以通过特定的键盘敲击来更改这些类，使旋转正确地旋转了三个步骤，直到它遇到了从 270 度到 0 度的步骤，默认情况下它是逆时针执行的（截至今天的 Chrome）。通过在 rotate(0) 之前添加 transform: rotate(360) 它可以根据需要旋转。感谢您的提示！