Вращение картинки СSS

Привожу очень интересный эффект ротации картинок при наведении, проще говоря это вращение картинки. Причем реализуется этот эффект без использования скриптов, на СSS. Хотя это может быть не только изображение, а такие элементы как ссылка, или блок div.

Чтобы увидеть эффект вращения картинки, наведите курсор.

Если немного пофантазировать, то данный hover вращения можно применять в каких-то своих проектах 🙂 . В основном используются в лендингах.
Картинки можно оборачивать в ссылки и делать их кликабельными, получится что-то вроде вращающихся кнопок.

Вращение, ротация картинки, код CSS и HTML

А вот и реализация данного hover эффекта вращения картинок. Для начала привожу CSS код:

.rotate{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow: hidden;
}
.rotate:hover{
cursor: pointer;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}

transition-duration: 0.8s — вращение происходит за 0.8 секунд.
rotate(360deg) — понятно, что картинка вращается на 360 градусов.

Просто приcвойте класс .rotate или назовите его как хотите. Я привожу HTML код, присвоенный картинке:

 <img class="rotate" src="images.png" alt="..." />

Как видно из примера, все достаточно просто и эффектно.

Похожие по Тегам статьи

Создание Video Background HTML 5

В данной статье идет речь о создании video background — фоновой видео заставки HTML 5 веб страницы

Оформление текста в HTML — Выноски Callout

Публикую несколько примеров оформления текста в HTML. Выноски Callout нужны для заострения внимания читателя…

Системные шрифты, подключение шрифтов к сайту

Шрифты — это неотъемлемая и очень важная часть дизайна сайта, подчеркивающая его индивидуальность. В…