HTML
<section>
<ul class='services'>
<li>
<div class='facebook'>
<i class="fa fa-facebook" aria-hidden="true"></i>
</div>
</li>
<li>
<div class='twitter'>
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</li>
<li>
<div class='gplus'>
<i class="fa fa-google-plus" aria-hidden="true"></i>
</div>
</li>
</ul>
</section>
CSS
html, body {
margin: 0;
background: #43cea2;
background: -webkit-linear-gradient(to left, #43cea2 , #185a9d);
background: linear-gradient(to left, #43cea2 , #185a9d);
}
section .services {
margin-top: 200px;
text-align: center;
transform: translatez(0);
}
section .services li {
width: 120px;
height: 140px;
display: inline-block;
margin: 20px;
list-style: none;
}
section .services li div {
width: 120px;
height: 120px;
color: #fff;
font-size: 3.4em;
text-align: center;
line-height: 120px;
box-shadow: 4px 2px 8px -4px rgba(0,0,0,0.75);
transition: all 0.5s ease;
}
.facebook {
background-color: #3b5998;
}
.twitter {
background-color: #1da1f2;
}
.gplus {
background-color: #dd4b39;
}
section .services li div:hover {
transform: rotate(360deg);
border-radius: 100px;
}
