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

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

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

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

Итак, сегодня мы поработаем с эффектом вращения изображения на 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_gdU6gC1j1AfLVpcbmXLHwE7sXqMujpiP-6FNjeecL1YjSWkgWqku9ObOFD4NnUxolUPAtC0YAdJ0IJnmlZi2OHvrfCnvTWjKsDI3165UjDtQ3Q4utBAYee0ULHOV3iTrqAWbjKjNfYs/s320/facebook.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://google.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis41a945DlJvjCaiG-wP8r6FoOTAyqOoFAJN6S_BYFJWV3qrAB7rzrLZVYaeHv5ydD2V6i4PY_RI12s3BukPpo1KoniZt4kedY5ittqr7p5gO8tuE4aT_BWuzQtuD_t_SA6CRpdOvsfGo/s320/google_plus.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://instagram.png">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW3BVB-jBD6a_HDYXLgPTFrrMaTt9VGMPukOO0j-0dXwey-T8QpGgA6I-gUJ_fQVGFqXtO73wwxdjPLJYvILIWQ1XngRwuMiYQJMvP1JCwdoQ689wO_tfbkbqSkc_PzewWZSKzIJxRD-4/s320/instagram.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://linkedin.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-KbNo9KPJyBIStaPefam5cFniBuVRlnj028PHVElfmoJ1kvxWKkWIztWQ9fmOdxzadWXHRD6MSrAtdVDGtpEE3ANQM0u2yojxt0qBDgmyBTzLy81mhNLDlw27PIk7IQwSrSdYCZ5U7dc/s320/linkedin.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://gmail.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHj7xeHRp9BxmziUW0N3jJjpVZM4SB0B5NEYojnHe_ntt2CcvVB-5v_I9L_XDI5z6Lb5_vEvU7_iOzSfq5Fc9zbVw11WYUY2nHH_ETUfAj4K1xjRCAMSrLUeMuCCDQ3iOCk1j90oJ57_0/s320/mail.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://odnoklassniki.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW8DSXjwWZhSz4GCwF41O8PVsR_l_-1dKnT2R0JnR9y7yucxWo8nXHtE0eFPrhgiq-OhS7y-Dt6m82lHJtShQPHU5JYY2z6QLzceJTeG9cuM04veHVRZrsmqYRMD1_hMeBVqyqp8pNo1c/s320/odnoklassniki.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://feedburner.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpKLOdJA6B79XVlp39RwhpfNu1U-fhoUR-7gnoas6KAwC8EFg397TFEO4WB6AX6V48aIDSOzKvSR2iicrViGjhq59wh-1rMxzuraAYoqWR66RkjGNrm85ApOe5j7yy089gXWnIdsyp4Ns/s320/rss.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://vk.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0HNnACM3MbBhu0cPxcTsLjSCwo3Cr5cYzmLy9yXRFmN7hQ6oT4IZzbTcGph4Du3mJHfp8se54H94JfRSYPdsYNzE6iLYCoZ99QOdrgxLpJLFJpbMJt4OJxLhoC0jEynsudgH8f1ywLQM/s320/vk_2.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="https://youtube.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVolMJ1UkVsy9AoIcMVDkoTFzZhcQpQaca98zpDkY7SbrK0yNHoh_lmnA7pd49VGK00ssrRmuskmM6_BbQzk0ohLkz2aNLE89IDHIYVRGStAMYIKl2aQ3_T6drMpd2XfBKwFdtuirkyio/s320/youtube_2.png"style="margin-right: 1px;" /></a>
</div>

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

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