Create Web Designer Depot like link Rollovers

Namaste (Hello) and welcome to this tutorial. Today we are going to learn about how to create an awesome link effect that you can see on the popular blog called Web Designer Depot. This effect is actually called as Link Rollovers. The Link Rollover uses CSS3 properties such as transform, perspective origin and transition in order to make the links look like a real 3D. In this tutorial we have used one Pseudo element called as :after along with the CSS3 properties. So please be ready to complete this tutorial with your choice of code editor and lets dig in.
After completing this tutorial you will be able to create this kind of Link Rollover effect in your website or your client's website for sure. As this tutorial do not make use of any kind of Javascript or jquery you should not worry about the page load time. But you need to worry about the browsers those do not support CSS3. I have checked Link Rollovers on the two major browsers called Mozilla Firefox and Google Chrome and those supports the Code like a charm. Whilst Internet Explorer does partially support the Link Rollovers.

HTML Code goes here

Please write down this below HTML code in your body section and save the file with .html extension.
Orem dhendrerit dd sdd <a href="http://www.webdesignerpad.com/"><span data-title="Web Designer Pad">Web Designer Pad</span></a> adipiscing elit. In dignissim auctor tempus. Sed hendrerit imperdiet est, a consectetur eros laoreet in. Quisque sed magna pulvinar leo posuere placerat ut et nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#"><span data-title="Maecenas rhoncus congue">Maecenas rhoncus congue</span></a> hendrerit. Aenean varius vestibulum enim, sit amet fermentum ligula volutpat sed. Phasellus eleifend ante non metus vehicula sit amet aliquet neque vehicula. <a href="#"><span data-title="Mauris porta">Mauris porta</span></a>, augue a accumsan pharetra, enim ante vehicula diam, vitae ullamcorper quam diam eu elit.

CSS Code goes here

So here comes the CSS code that you have to copy and paste in your CSS file or you can just add the below code to your existing HTML page using internal css inside <style>...</style> tags.

a{
    color: #03c;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -o-perspective: 600px;
    -ms-perspective: 600px;
    perspective: 600px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
}

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

a:hover span {
    background: #03c;
    -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    -o-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}

a span:after {
    content: attr(data-title);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 2px;
    color: #fff;
    background: #03c;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    -o-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}

So Now I am done with this tutorial and hope you liked it. If you have something on your mind please do comment below and tell us, ask us, or share with us your thoughts.

Labels: CSS3, Tutorials, Web Design