HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="1.page.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>
<ul>
<li>
<a href="">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fab fa-facebook"></span>
</a>
</li>
<li>
<a href="">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fab fa-twitter"></span>
</a>
</li>
<li>
<a href="">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fab fa-google-plus"></span>
</a>
</li>
<li>
<a href="">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fab fa-linkedin"></span>
</a>
</li>
<li>
<a href="">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fab fa-instagram"></span>
</a>
</li>
</ul>
</body>
</html>
CSS CODE:
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background:#262626
}
ul{
position: relative;
margin: 0;
padding: 0;
display: flex;
}
ul li{
position: relative;
list-style: none;
width: 110px;
height: 110px;
margin: 0 50px;
transform: rotate(-30deg) skew(25deg);
}
ul li span{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
transition: .5s;
display: flex !important;
justify-content: center;
align-items: center;
color: #fff;
font-size: 70px !important;
}
ul li:hover span:nth-child(5){
transform: translate(40px,-40px);
opacity: 1;
}
ul li:hover span:nth-child(4){
transform: translate(30px,-30px);
opacity: .8
}
ul li:hover span:nth-child(3){
transform: translate(20px,-20px);
opacity: .6;
}
ul li:hover span:nth-child(2){
transform: translate(10px,-10px);
opacity: .4;
}
ul li:hover span:nth-child(1){
transform: translate(0px,-0px);
opacity: .2
}
ul li:nth-child(1) span{
background-color: #3b5999;
}
ul li:nth-child(2) span{
background-color: #55acee;
}
ul li:nth-child(3) span{
background-color: #dd4b39;
}
ul li:nth-child(4) span{
background-color: #0077b5;
}
ul li:nth-child(5) span{
background-color: #e4405f;
}
ul li:hover span{
box-shadow: -1px 1px 1px rgba(0,0,0,.1)
}
TrueCodes 
Really cool animation, im using it but wondering if it is possible to round off the square corners. Making them bit more round?
LikeLiked by 1 person
thank you so much,
LikeLike
I was more than happy to find this web site. I want to to thank you for ones time for
this wonderful read!! I definitely enjoyed every little bit of it and I have you bookmarked to look at new stuff
in your blog.
LikeLiked by 1 person
Thank you very much for your nice review.
LikeLike
Does your site have a contact page? I’m having trouble locating it but, I’d like to send you an email.
I’ve got some creative ideas for your blog you might be interested in hearing.
Either way, great site and I look forward to seeing it
develop over time.
LikeLiked by 1 person
codeblogger@outlook.com
LikeLike
bookmarked!!, I like your blog!
LikeLiked by 1 person
thank you 🙂
LikeLike
Good day very nice website!! Man .. Beautiful .. Wonderful ..
I will bookmark your site and take the feeds also?
I’m happy to find numerous helpful info right here in the submit,
we’d like develop more strategies on this regard, thank you for sharing.
. . . . . http://cashgbvoh.review-blogger.com
LikeLike