Animation 3d social icones avec css3

<!DOCTYPE html>
<html>
<head>
<title>Animation 3d social icone avec css3 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keyword" content="Animation 3d social icone avec css3">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
  <li><a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
  <li><a href=""><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>
body{
  margin: 0;
  padding: 0;
  background-color: #ccc;
  }
  ul{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  display: flex;
  
  }
  ul li{
  list-style: none;
  margin: 0 40px;
  
  }
  ul li .fa{
  font-size: 40px;
  color: #262626;
  line-height: 80px;
  transition: .5s;
  
  }
  ul li a{
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  background-color: #fff;
  text-align: center;
  transform: perspective(100px) rotate(-30deg) skew(25deg) translate(0,0);
  transition: .5s;
  box-shadow: -20px 20px 10px rgb(0, 0, 0, 0.5);
  }
  ul li a::before{
  content: "";
  position: absolute;
  top: 10px;
  left: -20px;
  height: 100%;
  width: 20px;
  background: #b1b1b1;
  transition: .5s;
  transform: rotate(0deg) skewY(-45deg);
  }
  ul li a::after{
  content: "";
  position: absolute;
  top: 80px;
  left: -11px;
  height: 20px;
  width: 100%;
  background: #b1b1b1;
  transition: .5s;
  transform: rotate(0deg) skewX(-45deg);
  }
  ul li a:hover{
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px, -20px);
  box-shadow: -50px 50px 50px rgb(0, 0, 0, 0.5);
  }
  ul li:hover .fa{
  color: #fff;
  }
  ul li a:hover{
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px, -20px);
  box-shadow: -50px 50px 50px rgb(0, 0, 0, 0.5);
  }
  ul li:hover:nth-child(1) a{
  background: #3b5999;
  }
  
  ul li:hover:nth-child(1) a:before{
  background: #2e4a86;
  }
  ul li:hover:nth-child(1) a:after{
  background: #4a69ad;
  }
  ul li:hover:nth-child(2) a{
  background: #55acee;
  }
  ul li:hover:nth-child(2) a:before{
  background: #4184b7;
  }
  ul li:hover:nth-child(2) a:after{
  background: #4d9fde;
  }
  ul li:hover:nth-child(3) a{
  background: #dd4b39;
  }
  
  ul li:hover:nth-child(3) a:before{
  background: #c13929;
  }
  ul li:hover:nth-child(3) a:after{
  background: #e83322;
  }
  
  ul li:hover:nth-child(4) a{
  background: #0077B5;
  }
  
  ul li:hover:nth-child(4) a:before{
  background: #036aa0;
  }
  ul li:hover:nth-child(4) a:after{
  background: #0d82bf;
  }
  
  ul li:hover:nth-child(5) a{
  background: linear-gradient(#400080, transparent), linear-gradient(200deg, #d047d1, #ff0000, #ffff00);
  }
  
  ul li:hover:nth-child(5) a:before{
  background: linear-gradient(#400080, transparent), linear-gradient(200deg, #d047d1, #ff0000, #ffff00);
  }
  ul li:hover:nth-child(5) a:after{
  background: linear-gradient(#400080, transparent), linear-gradient(200deg, #d047d1, #ff0000, #ffff00);
  }

                                    
input file récupérer le nom du fichier

input file récupérer le nom du fichier

SwiperJS style01

SwiperJS style01

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Image hover 01

Image hover 01

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Css Page grid layout

Css Page grid layout

Convertir une div en image

Convertir une div en image

Changer le style du scroll bar in html

Changer le style du scroll bar in html

Card Profile Style01

Card Profile Style01

Arrows Defense Game

Arrows Defense Game

Affichage des images aléatoire avec js

Affichage des images aléatoire avec js

Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table