The HTML

<a href="#"><span data-title="link text">link text</span></a>

The CSS (using a wrapping p selector to only target paragraph links, not required):

p a {
    color: #e84b82;
    display: inline-block;
    text-decoration: none;
    overflow: hidden;
    vertical-align: top;
    -webkit-perspective: 600px;
    -ms-perspective: 600px;
    perspective: 600px;
    -webkit-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
    &:hover span {
      background: #e84b82;
      -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
      -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
      transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    }

    span {
      display: block;
      position: relative;
      padding: 0 3px;
      -webkit-transition: all .5s ease;
      -ms-transition: all .5s ease;
      transition: all .5s ease;
      -webkit-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
      transform-origin: 50% 0%;
      -webkit-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      transform-style: preserve-3d;
      &:after {
        content: attr(data-title);
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        padding: 0 3px;
        color: #fff;
        background: #e84b82;
        -webkit-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
        -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
        transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
      }
    }
}

Here’s the demo.

See the Pen 3D hover effect in CSS by sebastianekstrom (@sebastianekstrom) on CodePen.