Иконки социальных сетей с эффектом при наведении

И снова здравствуйте! Осталось несколько часов к решающему матчу для сборной Португалия против команды США, но чтобы время не терять опубликую запись, которая уже два месяца "валялась" в черновиках.

Не буду напоминать, насколько социальные сети важны для работы с посетителями/пользователями. Но как же привлечь юзера, чтобы тот кликнул по иконке какой-то соц. сети и перешел к Вам в группу? Правильно - любят глазами, то бишь визуально. 

Смотреть демо "Иконки социальных сетей с эффектом при наведении"

Итак, сегодня мы поработаем с эффектом вращения изображения на 360* градусов. Для этого используется свойство для hover transform: rotate(360deg).

CSS:

#social img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
/* Поворот на 360 градусов при наведении курсора*/
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

Чтобы не прописывать эффект каждому изображению, мы просто заключаем все картинки в отдельный div.

HTML:

<div id="social">
<a target="_blank" rel="nofollow" href="https://facebook.com">
<img border="0" src="https://3.bp.blogspot.com/-0KyMme_T5lc/U6cUk9eMKJI/AAAAAAAAIAo/_in4gv6I9To/s320/facebook.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://google.com">
<img border="0" src="https://3.bp.blogspot.com/-6kC_GqGGU-Q/U6cUlKraBxI/AAAAAAAAIAw/lw7-ybo7c6w/s320/google_plus.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://instagram.png">
<img border="0" src="https://4.bp.blogspot.com/-v6GSE7a-vrQ/U6cUlBrZF-I/AAAAAAAAIAs/uz3l6_qBRoI/s320/instagram.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://linkedin.com">
<img border="0" src="https://4.bp.blogspot.com/-IeAVfKPKuBY/U6cUmA9FWJI/AAAAAAAAIBk/uclglLdXHTQ/s320/linkedin.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://gmail.com">
<img border="0" src="https://3.bp.blogspot.com/-fBiHKhWCmLk/U6cUmSZfQyI/AAAAAAAAIA0/wiV0VeAbq2U/s320/mail.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://odnoklassniki.com">
<img border="0" src="https://1.bp.blogspot.com/-ZbPa__BooLQ/U6cUm2V6PWI/AAAAAAAAIA4/455nadQNWQo/s320/odnoklassniki.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://feedburner.com">
<img border="0" src="https://1.bp.blogspot.com/-gTCZnmn2BmA/U6cUnglijuI/AAAAAAAAIBI/zoYV_G8QQNk/s320/rss.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://vk.com">
<img border="0" src="https://2.bp.blogspot.com/-Pz8f3J8FQH8/U6cUn1RF9eI/AAAAAAAAIBE/nFMVP_uNmrM/s320/vk_2.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://youtube.com">
<img border="0" src="https://1.bp.blogspot.com/-a4x7q0UPv5o/U6cUpL9-SkI/AAAAAAAAIBU/x7mljlo1SCI/s320/youtube_2.png"style="margin-right: 1px;" /></a>
</div>

Очень круто смотрится этот эффект на круглых иконках. Для этого просто сделайте или найдите круглые иконки социальных сетей и поменяйте адреса на них. Посмотрите, что выйдет!

Кстати, не забудьте поменять ссылки на ваши профили ;)
На этом, всем приятного вечера и окончания выходных! Свои вопросы оставляйте в комментах ниже!. До встречи ;)