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

                                    
Animation 3d social icones avec css3

Animation 3d social icones avec css3

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

ChartJS style01

ChartJS style01

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Form login 03

Form login 03

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Image hover Flip Flap Style

Image hover Flip Flap Style

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Login Bootstrap3

Login Bootstrap3

Radio button style

Radio button style

Scroll to div ID

Scroll to div ID

input radio checkbox b4 style

input radio checkbox b4 style