Awsome hover

by Zmetser

HTML

<a href="#" class="roll-link"><span data-title="Integro Studio">Integro Studio</span></a>

<hr>
    
<p>Cégünk évek óta támogatja az <a href="#" class="roll-link"><span data-title="Etyeki Állatvédő Egyesületet">Etyeki Állatvédő Egyesületet</span></a>, az etyeki állatmenhelyen elhelyezett kutyáknak állateledelt adományoz. Most Te is segíthetsz a menhelyi állatoknak, akár  anyagi, akár tárgyi jellegű támogatással, bármelyiknek nagyon örülni fognak!</p>

CSS

/* Integro stuff */
body {
    background-color: #efefef;
    font: 16px/1.5 'Helvetica Neue', Helvetica, Arial;
}

/* Awsome hover */
.roll-link {
    display: inline-block;
    overflow: hidden;
    
    color: #310749;
    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 .4s ease;
           -moz-transition: all .4s ease;
            -ms-transition: all .4s ease;
                transition: all .4s 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: #310749;
                 

                -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: #310749;

           ...