<a href="#" class="cp_link">
<span data-text="リンクテキスト-link text-">リンクテキスト-link text-</span>
</a>

.cp_link {
  display: inline-block;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  vertical-align: bottom;
  overflow: hidden;
}
/*hover途中の動き*/
.cp_link:hover span {
  background-color: #dafbff;
  transform: translate3d(0, 0, -30px) rotateX(90deg);
}
/*hover時に表示される部分*/
.cp_link span {
  display: inline-block;
  position: relative;
  padding: 5px;
  transition: .4s;
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
}
.cp_link span:after {
  display: inline-block;
  position: absolute;
  padding: 5px;
  left: 0;
  top: 0;
  content: attr(data-text);/*hover時に表示されるテキスト*/
  color: #fff;
  background-color: #00ACC1;
  transform-origin: 50% 0%;
  transform: translate3d(0, 105%, 0) rotateX(-90deg);
}