Вращение картинки С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="..." />

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

Самостоятельный расчет неустойки. Гражданскии брак и наследство права гражданской жены на наследство.


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


2 thoughts on “Вращение картинки СSS

  1. Егор Автор записи

    Везде работает. Я шаблон менял на этом сайте и забыл стили для демо подключить просто.