.roll-link {
 display: inline-block;
 overflow: hidden;
 text-decoration:none;
 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%;      
}
 
.roll-link:hover {text-decoration:none;}
 
.roll-link span {
 display: block;
 position: relative;
 padding: 0 2px;
 
 -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;
}
.roll-link:hover span {
  background: #DD4D42;
 -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 );
}
 
.roll-link span:after {
 content: attr(data-title);
 display: block;
 position: absolute;
 left: 0;
 top: 0;
 padding: 0 2px;
 color: #fff;
 background: #DD4D42;
 
 -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 );
}