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

Как при помощи 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