如何控制css3动画旋转方向

Posted 2023-03-06

【中文标题】如何控制css3动画旋转方向

【英文标题】：How to control css3 animation rotate direction

【发布时间】：2012-05-15 10:18:36

【问题描述】：

我想用 css3 动画和变换属性旋转一个元素，从 20 度到 -20 度

@-moz-keyframes oneRotate
    0%
        -moz-transform: rotate(20deg);
    
    100%
        -moz-transform:rotate(-20deg);
    


.oneRotate

    -moz-transform-style: preserve-3d;

   -moz-animation-name:oneRotate;
   -moz-animation-duration:2s;
   -moz-animation-timing-function:ease-in-out;
   -moz-animation-delay:0s;
   -moz-animation-iteration-count:infinite;
   -moz-animation-direction:normal;

旋转顺序是 20 -> 0 -> -20... 是逆时针的

但我希望顺序是 20 -> 90 -> 180 -> ...顺时针

我能做些什么来实现这一目标？

【参考方案1】：

将 100% 旋转角度设置为 340 度。由于 -20 + 360 = 340，它与 -20 度的角度相同，但由于 340 > 20 但 -20

【讨论】：

但是当我想要起始角度为 80 度，结束角度为 20 度时，顺时针方向？

然后将 360 加到 20 以得到 380 度并将其设置为结束。规则是，如果结束大于开始，则顺时针旋转；如果结束小于开始，则逆时针。

rotate3d 显然没有遵循这个规则。这是正确的还是错误的？