CodePen

HTML

            
              <p> Lorem ipsum dolor sit amet, consectetur adipisicing <a href="#"><span data-title="sollicitudin">sollicitudin</span></a>. Possimus nulla.</p>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Francois+One);
$color: #e84b82;
$transition-time: .5s;

body {
  font-family: 'Francois One', sans-serif;
  font-size: 2em;
}

p {
 text-align: center;
}

p a {
    color: $color;
    display: inline-block;
    text-decoration: none;
    overflow: hidden;
    vertical-align: top;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -ms-perspective: 600px;
    perspective: 600px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
    &:hover span {
      background: $color;
      -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
      -moz-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 $transition-time ease;
      -moz-transition: all $transition-time ease;
      -ms-transition: all $transition-time ease;
      transition: all $transition-time ease;
      -webkit-transform-origin: 50% 0%;
      -moz-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
      transform-origin: 50% 0%;
      -webkit-transform-style: preserve-3d;
      -moz-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: $color;
        -webkit-transform-origin: 50% 0%;
        -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
        -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
        -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
        transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
      }
    }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................