Cacher is the code snippet organizer for pro developers

@white: #fff;
@nice-blue: #1a8de6;

.border-radius (@radius: 12px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

.perspective (@perspective: 400px, @origin-start: 50% , @origin-finish: 50%) {
    perspective: @perspective;
    -moz-perspective: @perspective;
    -webkit-perspective: @perspective;

    perspective-origin: @origin-start @origin-finish;
    -moz-perspective-origin: @origin-start @origin-finish;
    -webkit-perspective-origin: @origin-start @origin-finish;
}

.transition (@property: all, @duration: 400ms, @timing-function: ease, @delay: 0s) {
    transition: @property @duration @timing-function @delay;
    -moz-transition: @property @duration @timing-function @delay;
    -webkit-transition: @property @duration @timing-function @delay;
}

.transform (@origin-start: 50% , @origin-finish: 0%) {
    transform-origin: @origin-start @origin-finish;
    -moz-transform-origin: @origin-start @origin-finish;
    -webkit-transform-origin: @origin-start @origin-finish;
}

.transform-3d (@origin-start: 50% , @origin-finish: 0%) {
    transform-origin: @origin-start @origin-finish;
    -moz-transform-origin: @origin-start @origin-finish;
    -webkit-transform-origin: @origin-start @origin-finish;

    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.transform-translate3d (@x: 0px, @y: 105%, @z: 0px, @rotate: -90deg) {
    transform: translate3d( @x, @y, @z ) rotateX( @rotate );
    -moz-transform: translate3d( @x, @y, @z ) rotateX( @rotate );
    -webkit-transform: translate3d( @x, @y, @z ) rotateX( @rotate );
}


.roll {
    color: @nice-blue !important;
    display: inline-block;
    text-decoration: none !important;
    overflow: hidden;
    vertical-align: top;

    .perspective;

    span:after {
        color: @white;
        background: @nice-blue;

        content: attr(data-title);
        display: block;
        padding: 0 2px;

        position: absolute;
        left: 0;
        top: 0;

        .transform;

        .transform-translate3d(0px, 105%, 0px, -90deg);
    }

    span {
        display: block;
        position: relative;
        padding: 0 2px;

        .transition;

        .transform-3d;
    }
}

.roll:hover {
    span {
        background: #111;

        .transform-translate3d(0px, 0px, -30px, 90deg);
    }
}

// linkify
var supports3DTransforms =  document.body.style['webkitPerspective'] !== undefined ||
                            document.body.style['MozPerspective'] !== undefined;

function linkify( selector ) {
    if( supports3DTransforms ) {

        var nodes = document.querySelectorAll( selector );

        for( var i = 0, len = nodes.length; i < len; i++ ) {
            var node = nodes[i];

            if( !node.className || !node.className.match( /no_roll/ ) || !node.className.match( /roll/g ) ) {
                node.className += ' roll';
                node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>';
            }
        };
    }
}
linkify( 'a' );

<span>
    Any and all links below should be now "linkified"
</span>

<p>
    <a href="https://google.com">Google</a> <br>
    <a href="https://bing.com">Bing</a> <br>
</p>