如何控制CSS3动画旋转方向

Question

我想使用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->...是顺时针方向的。

我应该怎么做才能实现这个目标？

- hh54188

Answer 1

将100%的旋转角度设置为340度。这与-20度是相同的角度，因为-20+360=340，但它会以相反的方向旋转，因为340>20但-20<20。

- Venge

---

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

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

rotate3d 显然没有遵循这个规则。这是否正确，还是一个 bug？ - Marco Luglio