*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #ccc;
  perspective: 1000px;
  height: 100vh;
}
.text {
  position: absolute;
  top: 100px;
  left: 510px;
  font-size: 60px;
  transition: 0.5s linear;
}

.text:hover {
  transform: scale(1.2);
  color: #1da1f2;
}
ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  margin: 0;
  padding: 0;
  width: 60%;
}
ul li {
  display: inline-block;
  list-style: none;
  margin: 0 40px;
}
ul li a .fa {
  font-size: 40px;
  color: rgb(26, 26, 26);
  line-height: 80px;
  transition: .5s;
}
ul li a {
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  background-color: #fff;
  text-align: center;
  transform: rotate(-30deg) skew(25deg) translate(0,0);
  transition: .5s;
  box-shadow: -20px 20px 10px rgba(0, 0, 0, 0.466);
}

ul li a::before {
  content: '';
  position: absolute;
  top: 10px;
  left: -20px;
  width: 20px;
  height: 100%;
  transition: .5s;
  background-color: #bfbfbf;
  transform: rotate(0deg) skewY(-45deg);
}
ul li a::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: -10px;
  width: 100%;
  height: 20px;
  transition: .5s;
  background-color: #bfbfbf;
  transform: rotate(0deg) skewX(-45deg);
}
ul li a:hover {
  transform: rotate(-30deg) skew(25deg) translate(20px,-20px);
  box-shadow: -50px 50px 50px rgba(0, 0, 0, 0.582);
}
ul li a:hover .fa{
  color: #fff;
}
ul li:hover:nth-child(1) a {
  background-color: #3b5998;
}
ul li:hover:nth-child(1) a::before {
  background-color: #304677;
}
ul li:hover:nth-child(1) a::after {
  background-color: #4c6fbb;
}
ul li:hover:nth-child(2) a {
  background-color: #1da1f2;
}
ul li:hover:nth-child(2) a::before {
  background-color: #1e6ea0;
}
ul li:hover:nth-child(2) a::after {
  background-color: #1da1f2;
}
ul li:hover:nth-child(3) a {
  background-color: #dd4b39;
}
ul li:hover:nth-child(3) a::before {
  background-color: #a53223;
}
ul li:hover:nth-child(3) a::after {
  background-color: #f34731;
}
ul li:hover:nth-child(4) a {
  background-color: #0e76a8;
}
ul li:hover:nth-child(4) a::before {
  background-color: #0a4764;
}
ul li:hover:nth-child(4) a::after {
  background-color: #0c8eca;
}
ul li:hover:nth-child(5) a {
  background: radial-gradient(circle at 30% 107%,#d6249f 60%,#285AEB 90%); 
}
ul li:hover:nth-child(5) a::before {
  background: radial-gradient(circle at 30% 107%,#a81e7c 60%,#193999 90%);
}
ul li:hover:nth-child(5) a::after {
  background: radial-gradient(circle at 30% 107%,#d83da7 60%,#3663eb 90%);
}