Как управлять CSS3 анимации повернуть направление

Я хочу повернуть элемент с помощью CSS3 анимации и преобразования собственности, которые от 20 градусов до -20 градусовКак управлять CSS3 анимации повернуть направление

@-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 -> ... это по часовой стрелке

, что я могу сделать, чтобы достичь этого?

источник

2012-05-06 hh54188

Установите угол поворота 100% на 340 градусов. Это тот же угол, что и -20 градусов с -20 + 360 = 340, но он будет вращаться в противоположном направлении с 340> 20, но -20 < 20.

источник

2012-05-06 18:38:40 Venge

, но когда я хочу, чтобы начальный угол составлял 80 градусов, а конец 20 градусов, с направлением по часовой стрелке? – hh54188

Затем вы добавляете 360 на 20, чтобы получить 380 градусов, и установите это как конец. Правило состоит в том, что если конец больше начала, он будет вращаться по часовой стрелке; если конец меньше начала, то он против часовой стрелки. – Venge

rotate3d, по-видимому, не следует этому правилу. Это правильно или это ошибка? –

Как управлять CSS3 анимации повернуть направление

ответ

Смежные вопросы