Бесконечно вращающаяся картинка.

вращение изображения CSSПривет друзья. Сегодня опять  эффект для картинки. Смотрите, как можно сделать бесконечно вращающуюся картинку, используя стили CSS. Где это можно применить, решите сами. С помощью подобного кода можно заставить вертеться любое изображение.  Единственное, что формат его должен быть PNG.


Код можно вставить и в тело сообщения, и гаджет HTML/JavaScript. А вот и сам эффект.


А это код для него.

<style>.coleso {
     -webkit-animation-name: spin;
    -webkit-animation-duration: 15000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 15000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 15000ms;
    -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);
    }
}
    }</style>

<img class="coleso" height="320" src=" адрес картинки " width="320" />


15000ms-это скорость вращения, можно менять на свою. И пусть у всех голова идёт кругом.

Хороших всем выходных и последних летних денёчков. До встречи.


здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


18 комментариев:

  1. Выглядит прикольно, с ума сойти можно от того, на что способен css :)

    ОтветитьУдалить
    Ответы
    1. Сайхан, да уж. С css сейчас масса возможностей.Изучай не хочу. И флешек порой не надо.

      Удалить
  2. Здравствуйте Вика! Прошу у Вас совета.
    Сделал голый index.html и вставил Ваш код вращающейся картинки. Плюс файл images, куда вставил картинку. Все прекрасно! Вращается как надо.
    Но вот вставляю этот же код в Adobe Muse в HTML, картинка вращается так, что центром вращения становится правый верхний угол картинки.
    Никак не могу добиться, чтоб центром вращения стал центр картинки.
    Поможете советом? Буду признателен!
    Я сделал тестовый сайт для показа Вам:
    http://test-coleso.vekkr.ru/

    ОтветитьУдалить
  3. Ошибся: центром вращения является верхний ЛЕВЫЙ угол картинки.

    ОтветитьУдалить
    Ответы
    1. Владимир, В Блоггере у меня везде работает нормально. Попробуйте хотя бы здесь ваш код http://www.shpargalochki.ru/p/html.html У меня только вашу картинку не подгружает
      Могу единственное предложить вам подобный вариант отсюда https://habrahabr.ru/sandbox/78410/
      Также укажите путь к картинке и заключите в теги style код CSS.

      Удалить
  4. Вика! Большущее спасибо за оперативность и развернутый ответ!
    Буду продолжать эксперименты. На голом HTML+CSS все получается как надо. А при вставке в тело body Адобе Мьюз картинка по прежнему вращается взяв за центр верхний левый угол картинки. Буду искать причину этого глюка. При проверке в http://www.shpargalochki.ru/p/html.html всё хорошо и как надо.

    ОтветитьУдалить
  5. Попробуйте установить на сайт основной и посмотреть. Удалить сразу потом если что не так.

    ОтветитьУдалить
  6. Владимир4/03/2017

    Попробовал. То же самое. Центр вращения - верхний левый угол картинки.
    Кстати, код с хабра на голом HTML и CSS работает нормально. А при установке в Мьюз шестеренка вращается также с центром в верхнем левом углу ((
    Эксперименты продолжаю...

    ОтветитьУдалить
    Ответы
    1. Владимир, в любом случае отпишитесь потом пожалуйста. Самой уже интересно.

      Удалить
  7. Владимир4/03/2017

    Конечно, Вика! )

    ОтветитьУдалить
  8. Владимир4/04/2017

    Всё. Я отказался от идеи сделать вращающуюся картинку в Адобе Мьюз! Потеря времени. Нашел варианты как делать скриптом и с помощью джиквери, но это мне не по мозгам. Разобраться можно, но увы, некогда.
    А Вам, Вика, спасибо! Разбираясь с представленным Вами кодом, нашел кучу справочников по этой теме и детально разобрался в каждой косточке этого кода. Для меня это новые знания.
    Спасибо!

    ОтветитьУдалить
    Ответы
    1. Владимир, и Вам спасибо. А с джиквери просто подключить нужно и добавить в шаблон. Но будет время разберётесь. Новые знания это классно. Вообще, я у своих друзей поспрашивала сегодня, многие склонны к тому, что такая крутилка не очень хороша даже для браузера. Удачи Вам.

      Удалить
  9. Владимир4/04/2017

    Вот, вместо крутилки за головой смастерил сверкалку )))
    http://proba.vekkr.ru/

    ОтветитьУдалить
    Ответы
    1. Владимир, для тематики сайта, вполне симпатично. Я бы только поставила другую картинку. Моё мнение женщина на фотке должна быть в каких - то невероятно красивых украшениях. ИМХО.
      А где Ваш основной сайт.

      Удалить
  10. Владимир4/05/2017

    Здравствуйте Вика!
    Я обдумаю Ваш совет. В общем-то резон поменять центральную картинку есть.
    Про сайт. Основного сайта нет и не будет. В данном случае мне заказали 270 одностраничников. Каждый день я должен выкладывать в тырнет по одному одностраничнику с предложением одного товара. Шаблон дизайна единый, менять в каждом только товар. Каждый день - новый товар.
    Заказчица не хочет многостраничный сайт с кучей товара. Один лендинг - для одного товара.
    Регистрирую только один домен. А все 270 будут только на поддоменах от этого главного домена.
    Вот и нарабатываю единый шаблон. Вам показал еще очень сырую заготовку шаблона, над которым еще пока работаю. )

    ОтветитьУдалить
  11. Владимир4/05/2017

    Час искал подходящее лицо в центр сайта. Пока ничего подходящего под мои требования. Найдется если в будущем - хорошо. А пока оставлю эту.

    ОтветитьУдалить
    Ответы
    1. Я поняла. Удачи Вам, Владимир.

      Удалить
  12. Владимир4/05/2017

    Спасибо Вика!

    ОтветитьУдалить

Пользовательский поиск