<div class="share-container">
    <div class="share-flip-div">
        <div class="share-front">
            <i class="fas fa-share-alt"></i> Share This Page
        </div>
        <div class="share-back">
            <a href="https://www.facebook.com/Mr.PawanMall/">
             <i class="fab fa-facebook"></i>
          </a>
            <a href="https://twitter.com/pawan_mall">
          <i class="fab fa-twitter"></i>
          </a>
            <a href="https://in.pinterest.com/pawanmall">
          <i class="fab fa-pinterest"></i>
          </a>
        </div>
    </div>
</div>

.share-container {
  margin: 20% auto;
   perspective: 1000;
   transform-style: preserve-3d;
}
.share-container, .share-front, .share-back {
   width: 300px;
   height: 60px;
}
.share-container:hover .share-back {
   transform: rotateY(0deg);
}
.share-container:hover .share-front {
   transform: rotateY(180deg);
}

.share-front, .share-back {
   border:2px solid #CCC;
   border-radius:10px;
   line-height:60px;
   text-align:center;
   background:#EEE;
   box-shadow:0 0 2px #aaa;
   backface-visibility: hidden;
   transition: 0.6s;
   transform-style: preserve-3d;
   position: absolute;
   top: 0;
   left: 0;
}
.share-flip-div {
   transition: 0.6s;
   transform-style: preserve-3d;
   position: relative;
}
.share-front {
   z-index: 2;
   color:#666;
   text-shadow:0 0 3px #fff;
   font-size:1.3em;
   font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
   transform: rotateY(0deg);
}
.share-back {
   transform: rotateY(-180deg);
}

.share-back a{
  text-decoration: none;
  font-size:30px;
}

.share-back a{
  padding: 50px 10px;
}

.share-back img {
   vertical-align:middle;
}

No need for any JS script...