JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="linkhover"><span hover-title="LINK HOVER">LINK HOVER</span></a>

CSS

.linkhover {
    display: inline-block;
    background: green;
    overflow: hidden;
    perspective: 400px;
    -webkit-perspective: 400px;
    perspective-origin: 50% 50%;
    -webkit-perspective-origin: 50% 50%;
    color:white;
}
.linkhover span {
    display: block;
    position: relative;
    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.linkhover:hover span {
    transform: translate3d( 0px, 0px, -20px ) rotateX( 90deg );
    -webkit-transform: translate3d( 0px, 0px, -20px ) rotateX( 90deg );
}
.linkhover span:after {
    content: attr(hover-title);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    color: white;
    background: red;
    transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
    -webkit-transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
}