CSS3 Roll Links

                                          /* CSS3 ROLL LINKS */ .roll-link {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
         -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -ms-perspective: 600px;
         -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-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;
         -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
         -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-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 );
}
 .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%;
         -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}
  ---------------  
Click the link!
;