Roll Link

by Daniel Cheung

HTML

<a class="roll-link"><span data-title="Roll Link">Roll Link</span></a>

CSS

.roll-link{
    font-weight: bold;
    word-wrap:break-word;
    text-decoration:none;
    color: #3383DA;
    vertical-align: bottom;
    display: inline-block;
    -webkit-perspective: 600px;
    -webkit-perspective-origin: 50% 50%;
    perspective: 600px;
    perspective-origin: 50% 50%;
    overflow:hidden;
}

.roll-link span{
    display: block;
    padding: 0 2px;
    position: relative;
    -webkit-transform-origin: 50% 0;
    -webkit-transform-style:preserve-3d;
    transform-origin: 50% 0;
    transform-style:preserve-3d;
    transition: all 400ms ease 0s;
}

.roll-link:hover span {
    background: none repeat scroll 0 0 #3383DA;
    transform: translate3d(0px, 0px, -30px) rotateX(90deg);
    -webkit-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
}

.roll-link:hover span:after {
    background: none repeat scroll 0 0 #0C55A3;
}

.roll-link span:after {
    transition: all 400ms ease 0s;
    background: none repeat scroll 0 0 #FFFFFF;
    color: #FFFFFF;
    -webkit-perspective: 600px;
    -webkit-perspective-origin: 50% 50%;
    perspective: 600px;
    perspective-origin: 50% 50%;
    content: attr(data-title);
    display: block;
    left: 0;
    padding: 0 2px;
    position: absolute;
    top: 100%;
    -webkit-transform: rotateX(-90deg);
    -webkit-transform-origin: 0% 0%;
    transform: rotateX(-90deg);
    transform-origin: 0% 0%;
}