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);
  }

                                    
Vidéo background en html5 style01

Vidéo background en html5 style01

Simple Table With UIKIT

Simple Table With UIKIT

Scroll down button 01

Scroll down button 01

Scroll to div ID

Scroll to div ID

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Pie Charts

Pie Charts

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Loading style water animation

Loading style water animation

Form contact avec validation en css

Form contact avec validation en css

Créer une input search animée

Créer une input search animée

Changer le style du scroll bar in html

Changer le style du scroll bar in html

Card Profile Style01

Card Profile Style01