Как же добиться вращения при наведении, спросите Вы? Все очень просто, с помощью обычного CSS, без использования javascript, и других дополнительных плагинов.
Для того чтобы осуществить задуманное, нам понадобится два параметра CSS.
- transition - параметр, который задаст время анимации.
- transform - параметр, который создаст анимацию и будет вращать иконки.
И так, нам надо определится с тем элементом, который мы будим поворачивать. Потом задать ему класс или же если класс уже задан, дописать следующие стили. В нашем случаи класс у элемента - .block.
.block{float:left;width:32px;height:32px;margin-right:5px;-moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; }
.block:hover{-moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}
Просто элементу задаем параметр transition. Задаются много раз, для кроссбраузерности - -moz-transition, -webkit-transition, -o-transition, -ms-transition, transition.
Во всех одно значение - 0.8s, что означает, что анимация будет длится 0,8 секунды. Так что можете менять, чтобы ускорить или замедлить эффект.
Элементу при наведении (свойство - :hover) - задаем параметр transform. Он тоже задается много раз для кроссбраузерности и имеет значение - 360deg. Это градусы, на которые будет повернуто изображение. 360 - то есть полный оборот, если хотите задать не полный оборот, можете уменьшить значение.
Теперь Вы можете вращать любой элемент, задавая ему интересный эффект.
На этом все, спасибо за внимание. 🙂
