Главная » Рецепты CSS » Как сделать бесконечное вращение картинки на CSS3

Как сделать бесконечное вращение картинки на CSS3

2015-08-01 / Вр:14:08 / просмотров: 16522

Сейчас я делаю сайт для одной детской футбольной секции. На макете (там, где меню) я нарисовал футбольные мячики:

У меня появилась идея сделать так, чтобы при наведении на раздел ссылки из меню, мячик бесконечно вращался.
Как это сделать?
Можно, конечно, сделать анимацию вращающегося изображения в программе flash -редакторе или фотошопе.
Код для сайта будет вот таким:

<html>
 <head>
 <meta charset="utf-8">
 <title>Способ №1 - bloggood.ru</title>

<style>
 a.rollover {
 background: url(knopka-1.png); /* рисунок, который увидим сразу */
 display: block; /* Рисунок как блочный элемент */
 width: 300px; /* Ширина рисунка */
 height: 100px; /* Высота рисунка */
 }
 a.rollover:hover {
 background: url(knopka-2.png); /* заменяемый рисунок при наведении мыши */
 }
 </style>

 </head>
 <body>


<a href="#" class="rollover"> </a>

 </body>
</html>

Где картинка «knopka-1.png» – обычная картинка, а «knopka-2.png» – с анимацией (вращающаяся).

Но я решил не использовать графическую анимацию, а воспользоваться возможностью, которую предоставляет CSS3. В CSS3 есть свойство «animation» и «transform». С помощью этих свойств, я заставил бесконечно крутиться картинку, пока курсор мышки находиться на меню.

Итак, вот CSS код:

/* Бесконечное вращение изображения с помощью CSS3 */
	li:hover img {
	 -webkit-animation-name: spin;
    -webkit-animation-duration: 600ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 600ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 600ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

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

А вот так будет выглядеть меню в HTML:

<ul>
  <li><a href="#"><img src="images/myah.png"> Главная</a></li>
  <li><a href="#"><img src="images/myah.png"> О нас</a></li>
  <li><a href="#"><img src="images/myah.png"> Цены</a></li>
  <li><a href="#"><img src="images/myah.png"> Контакты</a></li>
</ul>

Где «myah.png» – это название картинки.

В результате вы увидите вот это:

[посмотреть пример]

Если нужно, чтобы картинка вращалась сразу, без наведения на нее курсора мышки, это можно сделать немножко по-другому.

На примере буду использовать изображение нашей планеты. И сейчас с помощью CSS3 Земля будет вращаться.

В CSS пишу:

/* Бесконечное вращение изображения с помощью CSS3 */
	.zemla {
	 -webkit-animation-name: spin;
    -webkit-animation-duration: 10000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 10000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 10000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 10000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
	}

там где «10000ms» – число можно заменять по желанию.

В HTML:

<img src=" zemla.png" class="zemla">

где «zemla.png» – это изображение Земли.

[посмотреть пример]

Возможно, вам будет интересна статья «Три способа сделать так, чтобы картинка менялась при наведении курсора мыши»?

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Популярные статьи:

Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 329815
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274370
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 220443
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186394
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 181502

17 Ответов на комментарий - Как сделать бесконечное вращение картинки на CSS3

Тимофей

02.08.2015 в 17:05

Теперь на всём блоге картинки крутятся
Есть косячок, когда на строку с картинкой наводишь, крутится неплохо, но когда на саму картинку, за ней появляется тень и видно, что крутится она вместе с рамкой, некрасиво. и где земля крутится, края белого фона задевают окружающие элементы, не айс. и вообще-то Земля в другой плоскости вращается
Степан => автор блога

02.08.2015 в 21:10

Ну вы, Тимофей, даете! Вы пробовали это сделать по примеру? Нет, не пробовали.
Отвечаю на ваши вопросики:
“…но когда на саму картинку, за ней появляется тень…” – это стиль подвязан с блога. Моя цель была показать не красоту, а работоспособность. По поводу земли, я думаю у вас, Тимофей хватит ума, чтобы сделать фон прозрачным и сохранить картинку в формате “png”.
“Земля в другой плоскости вращается…” – еще раз повторюсь, моя цель была не красота и не показ астрономических познаний. Если разобраться, то земля не круглая.
Да, Тимофей, рассмешили вы своим комментарием.
Тимофей

04.08.2015 в 14:30

Взаимно. отвечаю на ваши вопросики.
– по вашему примеру не пробовал, потому как полгода назад наигрался с «animation» и «transform», в частности со вращением, но мне не понравилось, так как более приятно смотрится вращение не по часовой стрелке, а изнутри наружу, т.е. в другой плоскости.
– потому как никакого функционала вращение картинок не несёт, делаем вывод, что это делается для красоты, верно?
а раз так, то для профессионала, коим я Вас, Степан, считаю, не составит трудности сделать прозрачный фон для Земли и убрать тень на четырёх картинках. Профессионализм в мелочах, так ведь? Вы рассказываете об интересных вещах, так почему бы не делать это более наглядно. Конечно, это Ваш блог, и Вы можете остаться при своём мнении, но у меня, как у читателя и возможного клиента, остается ощущение какой-то незавершенности
Людмила Лао

06.08.2015 в 13:04

с Земля png надо было фон убрать, белые квадраты видно при вращении.
Степан => автор блога

07.08.2015 в 00:55

Спасибо! Будет время, исправлю.
Степан => автор блога

19.08.2015 в 13:10

исправил!
Степан => автор блога

19.08.2015 в 13:10

исправил!
Людмила Лао

19.08.2015 в 16:59
Алексей

09.02.2016 в 22:39

все ок! спасибо.

два изображения почему то не получается крутить
хотел один по часовой
другой против ((

все перестает работать
название spin менял на spin2
не помогает

Степан => автор блога

10.02.2016 в 10:11

<html>
<head>
<title> Как сделать бесконечное вращение картинки на CSS3 </title>
<meta charset="utf-8">
<style>
li {
    float: left;
}
a {
    font-size: 20px;
    text-decoration: none;
}
/* Бесконечное вращение изображения с помощью CSS3 */
	li.kartinka1:hover img {

    animation-name: spin;
    animation-duration: 600ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

li.kartinka2:hover img {

    animation-name: spin2;
    animation-duration: 600ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
	

@keyframes spin2 {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(-360deg);
    }
}
	
</style>
</head>
<body>
<ul>
  <li class="kartinka1"><a href="#"><img src="/wp-content/uploads/2015/08/myah.png"> Главная</a></li>
  <li class="kartinka2"><a href="#"><img src="/wp-content/uploads/2015/08/myah.png"> О нас</a></li>
</ul>
</body>
</html>

Алексей

22.02.2016 в 01:55

СПасибо!
Степан => автор блога

22.02.2016 в 08:35

Пожалуйста!
Максим

04.03.2016 в 10:09

Сделал все как написано, даже формата не менял, оставил “PNG”, но почемуто картинка не прогружается, а сам блок крутится. Буду ждать ответа)

Степан => автор блога

04.03.2016 в 10:16

Максим, проверьте правильный путь до картинки
Для пример, можете попробовать вставить путь вот такой

<ul>
  <li><a href="#"><img src="/wp-content/uploads/2015/08/myah.png"> Главная</a></li>
  <li><a href="#"><img src="/wp-content/uploads/2015/08/myah.png"> О нас</a></li>
  <li><a href="#"><img src="/wp-content/uploads/2015/08/myah.png"> Цены</a></li>
  <li><a href="#"><img src="/wp-content/uploads/2015/08/myah.png"> Контакты</a></li>
</ul>

Mgin

26.05.2016 в 17:50

вот спасибо тебе дружище от души))помог и время дополнительное высвободил
Максим

09.06.2016 в 08:44

Спасибо большое, респект тебе)
Степан => автор блога

09.06.2016 в 22:24