<div class="headline__wrap js-headline-wrap">
  <div class="social-menu__headline">
    <div class="social-menu__headline-bg"></div>
    <a href=#>I'm link</a>
  </div>
</div>
a {
  position: relative;
  font-weight: bold;
  color: #fff;
  font-family: Arial;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.headline__wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  overflow: hidden;
}
.social-menu__headline {
  position: relative;
  padding: 0 40px;
}
.social-menu__headline-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 160px;
  height: 159px;
  background: url(https://daily.afisha.ru/static/assets/images/70486759174cd3cf8cbe91a02e256ad2.png) 0 0 no-repeat;
  transform-origin: 50% 50% 0;
  transform: translateX(20px) translateY(-4px) rotate(1turn);
  animation: social 5s infinite linear;
}



@keyframes social {
  0% {
      transform: translateX(20px) translateY(-4px) rotate(0deg) rotateY(0deg);
  }
  50% {
      transform: translateX(18px) translateY(-60px) rotate(180deg) rotateY(0deg);
  }
  100% {
      transform: translateX(20px) translateY(-4px) rotate(1turn) rotateY(0deg);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.