JQUERY and CSS - Rolling Link

rolling link.js

// inspired by the link effect on most interior posts from webdesigner depot like here: http://www.webdesignerdepot.com/2013/02/how-to-speed-up-your-website-load-times/

// most of the heavy lifting is done in the css below:
.single-post p a {
    display: inline-block;
    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%;
       
}

.single-post p a.rolling-link:hover {
  text-decoration: none !important;
  background: rgba(219, 18, 19, 0.4);

  -webkit-transition: all 800ms ease;
       -moz-transition: all 800ms ease;
       -ms-transition: all 800ms ease;
       transition: all 800ms ease;
}

.single-post p a span.rolling-link-bold {
  font-weight: bold;
}

.single-post p a span {
    display: block;
    position: relative;
    padding: 0 2px;

    -webkit-transition: all 600ms ease;
       -moz-transition: all 600ms ease;
       -ms-transition: all 600ms ease;
       transition: all 600ms 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;
}
.single-post p a:hover span {
     
         

        -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 );
}

.single-post p a span:after {
    content: attr(data-title);

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 2px;

    

    color: #fff;
    background: rgba(219, 18, 19, 0.8);

 

    -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 );
}

// here's the jquery code I whipped up to inset a span tag on certain
// a links

(function() {

			if( !(navigator.appName == 'Microsoft Internet Explorer') )  { // don't run if IE

				var $link = $('.single-post p a');	// the link I want to be rollable			

				$link.each(function() {
					var $this = $(this);
					$this.addClass('rolling-link');

					var $text = $this.text();

					if ($this.children('strong').text().length > 0 ) { // check to see if text is bolded

						$this.wrapInner('<span class="rolling-link-bold" data-title="' + $text + '" >');
					} else {
						$this.wrapInner('<span data-title="' + $text + '" >');
					}
				});		
			}		
		})();