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

                                    
Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire

Background div gradient

Background div gradient

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Bootstrap4 datepicker

Bootstrap4 datepicker

Elastic Content Slider

Elastic Content Slider

Form login et créer un compte style01

Form login et créer un compte style01

Header Aside Footer Admin

Header Aside Footer Admin

Input range slider HTML style04

Input range slider HTML style04

Lightbox gallery style01

Lightbox gallery style01

Radio button style

Radio button style

Timeline style08

Timeline style08

page scroll progress bar

page scroll progress bar