Вращение CSS на 360 градусов

Я хочу повернуть прямоугольник под углом 360 градусов (или даже> 360 градусов) с помощью CSS. Центр вращения - «правый центр». Если я использую следующий CSS код для поворота на 180 градусов (и вызвать вращение с JavaScript) он работает отлично:Вращение CSS на 360 градусов

.animated.rotation { 
    -webkit-animation-duration: 9s; 
    animation-duration: 9s; 
} 

@keyframes rotation { 
     from { 
    -webkit-transform-origin: right center; 
    transform-origin: right center; 
    opacity: 1; 
    -webkit-animation-timing-function: linear; 
    } 

to { 
    -webkit-transform-origin: right center; 
    transform-origin: right center; 
    -webkit-transform: rotate3d(0, 0, 1, 180deg); 
    transform: rotate3d(0, 0, 1, 180deg); 
    opacity: 1; 
    -webkit-animation-timing-function: linear; 
    } 
} 

.rotation { 
    animation-name: rotation; 
}

Однако, если заменить на 180 градусов под углом> = 360 градусов он выиграл» t работать больше. Например, в случае 360 градусов ничего не происходит, потому что исходное положение равно конечной позиции вращения.

Как можно выполнять повороты на 360 градусов или более?

источник

2017-02-12 Tall83

Поскольку вы используете keyframes, вам нужно установить продолжительность анимации https://developer.mozilla.org/en-US/docs/Web/CSS/animation –

Да, я также задал продолжительность анимации: .animated.rotation { -webkit-animation -duration: 9s; анимация-продолжительность: 9 с; } Однако это не работает на 360 градусов. – Tall83

Обновите свой код, чтобы показать его, хотя ... –

Поскольку мы не имеем рабочий фрагмент кода, я здесь сделал один с посланной CSS, и вы должны быть в состоянии сделать, как этот

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
    border-top-left-radius: 10px; 
 
    margin: 50px; 
 
} 
 
.animated.rotation { 
 
    -webkit-animation-duration: 4s; 
 
    animation-duration: 4s; 
 
    -webkit-animation-timing-function: linear; 
 
    animation-timing-function: linear; 
 
    -webkit-animation-name: rotation; 
 
    animation-name: rotation; 
 
    -webkit-animation-iteration-count: infinite; 
 
    animation-iteration-count: infinite; 
 
    transform-origin: right center; 
 
} 
 

 
@keyframes rotation { 
 
    from { 
 
    -webkit-transform: rotate3d(0, 0, 1, 0deg); 
 
    transform: rotate3d(0, 0, 1, 0deg); 
 
    } 
 

 
    to { 
 
    -webkit-transform: rotate3d(0, 0, 1, 360deg); 
 
    transform: rotate3d(0, 0, 1, 360deg); 
 
    } 
 
}

<div class="animated rotation"></div>

источник

2017-02-12 19:22:45 LGSon

Вращение CSS на 360 градусов

ответ

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