CSS3 Rolling links

After watching Paul Irish‘s Tooling – JSConf slideshow, I decided to extract his rolling links CSS definition and examinate it.

Here it is:

HTML

​<div id="reveal">
	<a href="http://zsitro.com/" class=" roll">
		<span data-title="H5BP build script">H5BP build script</span>
	</a>
</div>

CSS

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

#reveal .roll {
    display: inline-block; /* give it a layout */    
    overflow: hidden;
    vertical-align: top; /* just to be sure */

    /*
     * The smaller the number the closer you look at this  element
    */
    -webkit-perspective: 400px;
       -moz-perspective: 400px;
        -ms-perspective: 400px;
            perspective: 400px;

    /*
     * Relative position of the POV
     * Default is 50% 50% so not necessary
    */
    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: 50% 50%;
            perspective-origin: 50% 50%;    

}
    #reveal .roll:hover {
        background: none;
        text-shadow: none;
    }

#reveal .roll span {
    display: block; /* give it a layout */ 
    position: relative;
    padding: 0 2px;

    pointer-events: none;

    /* duration */
    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;
        -ms-transition: all 400ms ease;
            transition: all 400ms ease;

    -webkit-transform-origin: 50% 0%; /* posx posy */
       -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;
    /*
    * CSS3 transform-style explained here:
    * http://www.webkit.org/blog-files/3d-transforms/transform-style.html
    */
}
    #reveal .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 );
    }


/* ======================= */
/* = Face after rotation = */
/* ======================= */
#reveal .roll span:after {
    content: attr(data-title);
    display: block; /* maybe its not necessary */
    position: absolute; /* position over  */
    left: 0;
    top: 0;
    padding: 0 2px; /* nothing functional, just right, left space */

    color: #fff;
    background: hsl(185, 60%, 35%);

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    
    /* 
    * translate3d => move up element to the top 
    *     rotateX => rotate till hidden
    */
    -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 );
}