Вращение картинок по кругу

Как при помощи CSS сделать вращение картинки. Часто такой эффект используют для придания оригинальности каких - то кнопок, которые при наведении курсора начинают крутится. Можно применить его абсолютно к любому изображению. А ещё, если прописать к этим картинкам ссылку на нужную страницу, у нас получится вполне своеобразная картинка - ссылка.

Предлагаю вам 3 варианта вращающихся картинок. Выбирайте на свой вкус, что кому нужно.

Поворот на 360 градусов.



<style>
div#rotateimg360 img {
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
div#rotateimg360 img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
<div id="rotateimg360">
<a href="http://www.shpargalochki.ru/p/blog-page_1.html">
<img src="https://img-fotki.yandex.ru/get/9503/36014149.249/0_8ea6d_40f3210c_S
" /></a>
<a href="http://www.shpargalochki.ru/p/blog-page_34.html">
<img src="https://img-fotki.yandex.ru/get/9511/36014149.248/0_8ea14_c6e0a126_S
" /></a>
</div>


Поворот на 180 градусов.



<style>
div#rotateimg180 img {
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
div#rotateimg180 img:hover {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
</style>
<div id="rotateimg180">
<a href="http://www.shpargalochki.ru/p/blog-page_1.html">
<img src="https://img-fotki.yandex.ru/get/9503/36014149.249/0_8ea6d_40f3210c_S
" /></a>
<a href="http://www.shpargalochki.ru/p/blog-page_34.html">
<img src="https://img-fotki.yandex.ru/get/9511/36014149.248/0_8ea14_c6e0a126_S" /></a>
</div>


Поворот на 90 градусов.



<style>
div#rotateimg90 img {
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
div#rotateimg90 img:hover {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
<div id="rotateimg90">
<a href="http://www.shpargalochki.ru/p/blog-page_1.html">
<img src="https://img-fotki.yandex.ru/get/9503/36014149.249/0_8ea6d_40f3210c_S
" /></a>
<a href="http://www.shpargalochki.ru/p/blog-page_34.html">
<img src="https://img-fotki.yandex.ru/get/9511/36014149.248/0_8ea14_c6e0a126_S" /></a>
</div>


Синим цветом я отметила адреса страниц, куда будет вести ссылка. И красным - адрес самого изображения. Если не хотите чтобы картинка была кликабельная, пишите просто путь к изображению. Вот так.

<div id="rotateimg90">
<img src="http://agitki.ru/_bl/1/04066477.png" /></div>


Размеры изображения могут быть абсолютно любые. Вставляйте выбранный код непосредственно в редакторе блога в режиме HTML в нужном месте. Или оформляйте свои кнопки социальных сетей и другие картинки в гаджете HTML.

Ещё красивые эффекты для изображений.

Вот сегодня и всё. Всем спасибо. Увидимся.


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

Введите Ваш email


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

  1. Виктория, у тебя много интересных постов по картинкам. Я раньше картинками не очень интересовалась. Меня устраивали простые картинки. А сейчас прочитала твой пост, и вспомнила, что ты писала, как сделать, например 4 фотографии вместе или 2-е. Не подскажешь, где мне можно посмотреть?

    ОтветитьУдалить
  2. Да, Ирина. Не мало. Но статья скорее всего о том, как на CSS можно повернуть любой элемент. Например многие спрашивали, как сделать крутящиеся кнопки соц. сетей. Это именно о том. Вставляешь в код кнопок такой стиль и вуаля. Про несколько картинок здесь http://www.shpargalochki.ru/2016/10/oformlenijakartinok-s-ispolzovaniem-CSS.html
    А вообще у меня вверху есть меню (все статьи) там всё по тематике разбито.

    ОтветитьУдалить
  3. Приветик, Вика. Ещё один интересный вариант с картинкой, который можно использовать в сообщении. Спасибо большое.

    ОтветитьУдалить
    Ответы
    1. Люба, привет. Можно и в сообщении картинки крутить. И оформлять всякие кнопочки. Те же аваторки в комментариях, что угодно. Спасибо.

      Удалить
  4. Какие классные скрипты. Такие картинки хорошо смотрятся на открытках. Сделала крутящиеся пасхальные яйца, только сделала, чтобы ссылка открывалась в новом окне.
    http://sprazdnpacha.blogspot.ru/. Спасибо!

    ОтветитьУдалить
    Ответы
    1. Ой, как здоровски получилось. Мне очень понравилась. Отписалась здесь. http://www.svet-lanka.ru/p/blog-page_24.html?showComment=1492404584425

      Удалить

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