<div class="container">

  <ul class="menu">
    <li><a href="#" class="facebook"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#"  class="twitter"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#"  class="googlePlus"><i class="fa fa-google-plus"></i></a></li>
    <li><a href="#" class="youtube"><i class="fa fa-youtube"></i></a></li>
  </ul>
</div>

$facebook:#3B5998;
$twitter:#1DA1F2;
$youtube:#FF0000;
$googlePlus:#DB4437;
body{
  background-color: #DEB841;
}
.container{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.menu{
  text-align: center;
  position: relative;
  margin: auto;
  transform-style: preserve-3d;
  padding: 0;
  list-style-type: none;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  li{
    transform-style: preserve-3d;
    position: relative;
    margin:40px;
    display: inline-block;
    transform: rotateX(-20deg) rotateY(45deg);
    animation: move 2s ease infinite;
    a{
      height: 100px;
      width: 100px;
      display: inline-block;
      line-height: 120px;
      color:#fff;
      text-decoration: none;
      position: relative;
      &::before{
        content:"";
        position: absolute;
        height: 100%;
        width:100%;
        left: -100%;
        top: 0;
        bottom: 0;
        margin: auto;
        transform-origin: right;
        transform: rotateY(-90deg);
        transform-style: preserve-3d;
      }
      &::after{
        content:"";
        position: absolute;
        height: 100%;
        width:100%;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        transform: rotateX(-90deg);
        transform-origin: top;
      }
      i.fa{
        font-size: 3rem;
        text-shadow: 
        0px 0px 2px rgba(0,0,0,0.5),
        1px 1px 2px rgba(0,0,0,0.5),
        2px 2px 2px rgba(0,0,0,0.5);
      }
    }
    &::after{
      content:"";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -20px;
      margin: auto;
      height: 100%;
      width:100%;
      display: inline-block;
      background-color: rgba(0,0,0,0.2);
      transform-origin: bottom;
      transform: rotateX(90deg) translateY(0px);
      z-index:-1;
      animation: shadowAnimation 2s ease infinite;
    }
  }
  @for $i from 1 through 4{
    li:nth-child(#{$i})
    {
      animation-delay: #{$i*0.2}s;
      &::after{
        animation-delay: #{$i*0.2}s;
      }
    }
  }
}

.facebook{
  background-color: $facebook;
  &::before{
    background-color: darken($facebook,20%);
  }
  &::after{
    background-color: darken($facebook,30%);
  }
}

.twitter{
  background-color: $twitter;
  &::before{
    background-color:darken($twitter,20%);
  }
  &::after{
    background-color: darken($twitter,30%);
  }
}

.googlePlus{
  background-color: $googlePlus;
  &::before{
    background-color:darken($googlePlus,20%);
  }
  &::after{
    background-color: darken($googlePlus,30%);
  }
}


.youtube{
  background-color: $youtube;
  &::before{
    background-color: darken($youtube,20%);
  }
  &::after{
    background-color: darken($youtube,30%);
  }
}

@keyframes move{
  0%,100%{
    transform:rotateX(-20deg) rotateY(45deg) translateY(-10px);
  }
  50%{
    transform:rotateX(-20deg) rotateY(45deg) translateY(10px);
  }
}

@keyframes shadowAnimation{
  0%,100%{
   bottom: -40px;
   opacity: 0.2;
  }
  50%{
    bottom: -10px;
    opacity: 1;
  }
}