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

вращение изображения 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


23 комментария:

  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

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

    ОтветитьУдалить
  13. Здравствуйте! Очень понравилась картинка Ваша. Не подскажите как сделать что б картинка крутилась не как колесо, а как ось, ну тоесть справа налево по центральной оси проходящей посредине картинки вертикально.. Ну вы поняли? и ещё желательно что б у картинки стал как бы обьём, что б она при прокрутке имела толщину.. Надеюсь я понятно излагаю)) трудно простые вещи описывать словами)) проще показать но как ? )))

    ОтветитьУдалить
  14. Здравствуйте. Примерно поняла. Вариантов много. Можно и с помощью Javascript и jquery. У меня статьи нет на эту тему информации много. . Легче использовать transform-style почитайте здесь transform-style или вот здесь http://spritespin.ginie.eu/examples.html#basic-usage.html ещё вариант. Примеров много забейте в поиск вращение объёмного изображения вокруг оси.

    ОтветитьУдалить
    Ответы
    1. оооо, это очень круто, но только я не понимаю что то, у меня не работает в браузере это. как заставить что б крутился велосипед в обычном браузере? спасибо за ссылки!

      Удалить
  15. Дам ещё один вариант, сама пробовала. Там Юрий ответит на Ваши вопросы http://www.sitehere.ru/3d-preobrazovaniya-i-animacii мне совсем нет сейчас перед праздником времени писать свои коды. Хотя темку эту нужно понять просто.

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

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

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