Вращение изображения

@Wizzzz · Регистрация: 03.11.2013

Author24 — интернет-сервис помощи студентам

Здравствуйте!
Понадобилось мне повращать изображение вокруг своей оси и только при помощи HTML и CSS. Получилось вот такое:

CSS

.rotate:hover{
    animation-name: spin;
    animation-duration: 600ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
 
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(180deg);
    }

Работает как нужно, по наведению курсора крутится как "шар голубой", а при отведении курсора изображение возвращается в своё изначальное положение. И вот такое возвращение в начальное положение очень мозолит глаз. Хотелось бы, чтобы при отведении курсора изображение застывало, сохраняя угол на который уже повернулось.
Возможно ли сделать такое? И каким образом?

Заранее очень благодарен! Собственных знаний пока не хватает

@astartes · 22.02.2016, 12:06

тут по-моему на событие ommouseout нужно повесить функцию, которая будет ловить текущее значение rotate и его присваивать изображению.
Но даже если реализовать так, то когда пользователь опять наведет курсор, то rotate можно принять значение from

@astartes 7 / 7 / 4 Регистрация: 16.06.2015 Сообщений: 63
	22.02.2016, 12:06	2
	тут по-моему на событие ommouseout нужно повесить функцию, которая будет ловить текущее значение rotate и его присваивать изображению. Но даже если реализовать так, то когда пользователь опять наведет курсор, то rotate можно принять значение from 0