.ul
 {
     display:flex;
     position:absolute;
     top:50%;
     left:50%;
     //transform:translate(-50%,-50%);
 } 
 
 .ul .li
 {
     list-style:none;
 }

 .ul .li a
 {
     width:70px;
     height:70px;
     background:#fff;
     text-align:center;
     line-height:70px;
     font-size:32px;
     margin: 0 10px;
     display:block;
     border-radius:50%;
     position:relative;
     overflow:hidden;
     border:3px solid #A0522D;
     z-index:1;
 }

 .ul .li a .fa
 {
     position:relative;
     color:#262626;
     transition:.5s;  
     z-index:3;
 }

  .ul .li a:hover .fa
 {
      color:#fff;
     transform:rotateY(360deg);        
 }
  .ul .li a::before
{
     content:'';
     position:absolute;
     top:100%;
     left:0;
     width:100%;
     height:100%;
     background:#f00;
     transition:.5s;
     z-index:2;
 }
  .ul .li a:hover:before
{
  top:0;
 }
.ul .li:nth-child(1) a::before
{
  background-color:#3b5999;
 }
.ul .li:nth-child(2) a::before
{
  background-color:#55acee;
 }
.ul .li:nth-child(3) a::before
{
  background-color:#0077B5;
 }