A CodePen by Jorge Epuñan.

index.html

<a href="http://www.rvl.io" class="roll"><span data-title="rvl.io">rvl.io</span></a>

<!--
 * ROLLING LINKS 
 * as seen in http://lab.hakim.se/reveal-js/#/21
-->

style.css

body {
  background: #1C1E20;
  background: -moz-radial-gradient(center, circle cover, #555A5F 0%, #1C1E20 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555A5F), color-stop(100%, #1C1E20));
  background: -webkit-radial-gradient(center, circle cover, #555A5F 0%, #1C1E20 100%);
  background: -o-radial-gradient(center, circle cover, #555A5F 0%, #1C1E20 100%);
  background: -ms-radial-gradient(center, circle cover, #555A5F 0%, #1C1E20 100%);
  background: radial-gradient(center, circle cover, #555A5F 0%, #1C1E20 100%);
  background-color: #2B2B2B;
  text-align: center;
}
a {
  font-family: Georgia, Times, "Times New Roman", serif;
  font-size: 36px;
  font-weight: 200;
  letter-spacing: -0.02em;
  color: #13DAEC;
  text-decoration: none;
  -webkit-transition: color .15s ease;
  -moz-transition: color .15s ease;
  -ms-transition: color .15s ease;
  -o-transition: color .15s ease;
  transition: color .15s ease;
}
  a:hover {
    color: #71e9f4;
    text-shadow: none;
    border: none;
  }
  a span:after {
    color: #fff;
    background: #0d99a5;
  }
.roll {
  display: inline-block;
  line-height: 1.2;
	overflow: hidden;

	vertical-align: top;

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

	-webkit-perspective-origin: 50% 50%;
	   -moz-perspective-origin: 50% 50%;
	    -ms-perspective-origin: 50% 50%;
	        perspective-origin: 50% 50%;
}
	.roll:hover {
		background: none;
		text-shadow: none;
	}
.roll span {
	display: block;
	position: relative;
	padding: 0 2px;

	pointer-events: none;

	-webkit-transition: all 400ms ease;
	   -moz-transition: all 400ms ease;
	    -ms-transition: all 400ms ease;
	        transition: all 400ms 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;

	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	        backface-visibility: hidden;
}
	.roll:hover span {
	    background: rgba(0,0,0,0.5);

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

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

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

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