jdforsythe/rolling-links.css

## rolling-links.css
a {text-decoration: none;}

.roll-link {
    display: inline-block;
    overflow: hidden;

    vertical-align: top;

    -webkit-perspective: 400px;
       -moz-perspective: 400px;

    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
}
.roll-link span {
    display: block;
    position: relative;
    padding: 0 2px;

    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
}
    .roll:hover span {
        background: #111;

        -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    }
.roll-link span:after {
    content: attr(data-title);

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

    color: #fff;
    background: hsl(206, 80%, 30%);

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;

    -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
       -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}

## rolling-links.html
<html>
<head>
  <script type="text/javascript" src="rolling-links.js"></script>
  <link rel="stylesheet" href="rolling-links.css" />
</head>
<body>
  <h1>Links that roll on hover in supported browsers (attaches a span inside all anchor tags with "roll" class)</h1>
  <a href="#">Rolling Links</a>
</body>
</html>

## rolling-links.js
var supports3DTransforms =  document.body.style['webkitPerspective'] !== undefined ||
                            document.body.style['MozPerspective'] !== undefined;

function linkify() {
    var selector = 'a';
    if(supports3DTransforms) {
        var nodes = document.querySelectorAll(selector);

        for( var i = 0, len = nodes.length; i < len; i   ) {
            var node = nodes[i];

            if( !node.className || !node.className.match( /roll/g ) ) {
                node.className  = ' roll-link';
                node.innerHTML = '<span data-title="'  node.text  '">'   node.innerHTML   '</span>';
            }
        };
    }
}

makeRollLinks();

/* JQUERY

var supports3DTransforms = document.body.style['webkitPerspective'] !== undefined || document.body.style['MozPerspective'] !== undefined;

var makeRollLinks = function() {
    var selector = 'a';
    if(supports3DTransforms) {
        $(selector).each(function() {
            this.addClass('roll-link');
            this.html('span data-title="'   this.text()   '">' this.html()   '</span>');
        });
    }
};
makeRollLinks();
*/
	a {text-decoration: none;}

	.roll-link {
	display: inline-block;
	overflow: hidden;

	vertical-align: top;

	-webkit-perspective: 400px;
	-moz-perspective: 400px;

	-webkit-perspective-origin: 50% 50%;
	-moz-perspective-origin: 50% 50%;
	}
	.roll-link span {
	display: block;
	position: relative;
	padding: 0 2px;

	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;

	-webkit-transform-origin: 50% 0%;
	-moz-transform-origin: 50% 0%;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	}
	.roll:hover span {
	background: #111;

	-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
	-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
	}
	.roll-link span:after {
	content: attr(data-title);

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

	color: #fff;
	background: hsl(206, 80%, 30%);

	-webkit-transform-origin: 50% 0%;
	-moz-transform-origin: 50% 0%;

	-webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
	-moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
	}
	<html>
	<head>
	<script type="text/javascript" src="rolling-links.js"></script>
	<link rel="stylesheet" href="rolling-links.css" />
	</head>
	<body>
	<h1>Links that roll on hover in supported browsers (attaches a span inside all anchor tags with "roll" class)</h1>
	<a href="#">Rolling Links</a>
	</body>
	</html>
	var supports3DTransforms = document.body.style['webkitPerspective'] !== undefined \|\|
	document.body.style['MozPerspective'] !== undefined;

	function linkify() {
	var selector = 'a';
	if(supports3DTransforms) {
	var nodes = document.querySelectorAll(selector);

	for( var i = 0, len = nodes.length; i < len; i ) {
	var node = nodes[i];

	if( !node.className \|\| !node.className.match( /roll/g ) ) {
	node.className = ' roll-link';
	node.innerHTML = '<span data-title="' node.text '">' node.innerHTML '</span>';
	}
	};
	}
	}

	makeRollLinks();

	/* JQUERY

	var supports3DTransforms = document.body.style['webkitPerspective'] !== undefined \|\| document.body.style['MozPerspective'] !== undefined;

	var makeRollLinks = function() {
	var selector = 'a';
	if(supports3DTransforms) {
	$(selector).each(function() {
	this.addClass('roll-link');
	this.html('span data-title="' this.text() '">' this.html() '</span>');
	});
	}
	};
	makeRollLinks();
	*/