translate 3d rolling links

by lovromar

HTML

Who's the best? <a href="#" class="roll"><span data-title="bubba">bubba</span></a>

CSS

/**** BODY ****/
body {

    font-size: 40px;
    font-weight: 200;
    text-align: center;
}

a {
    color: black;
    background: yellow;
    text-decoration: none;
}
    
a:hover {
    color: black;
    background: yellow;
    text-shadow: none;
    border: none;
    border-radius: 2px;
}

/*********************************************
 * ROLLING LINKS
 *********************************************/

.roll {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;

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

    -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 600ms ease;
       -moz-transition: all 400ms ease;
        -ms-transition: all 400ms ease;
            transition: all 400ms ease;
    
    -webkit-transform-origin: 220% 0%;
       -moz-transform-origin: 220% 0%;
        -ms-transform-origin: 220% 0%;
            transform-origin: 220% 0%;
    
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.roll:hover span {
    background: rgba(190,190,20,.9);

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

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 1px 2px;
    white-space: nowrap;

    color: white;
    background:...