How to create 3D links rolling on hover

22 August 2012



This is all CSS needed to create a nice 3D rolling link effect on your website. You might want to remove the first declaration (body) to avoid conflicts on your site, but you could just copy the rest in your CSS file.

There's only one downside with this effect; you need to enter the link text again as data attribute in the link, ánd wrap the text in a span element:

<a href="#" class="roll"><span data-title="Johan van Tongeren">Johan van Tongeren</span></a>

Now go try it yourself. Copy-paste it in your website or play around on JSFiddle.

body {
    padding: 30px;
    font-size: 30px;
    font-weight: 200;
}

a {
    color: black;
    background: yellow;
    text-decoration: none;
}
   
a:hover {
    color: black;
    background: yellow;
    text-shadow: none;
    border: none;
    border-radius: 2px;
}

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


.roll {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;

    -webkit-perspective: 300px;
       -moz-perspective: 300px;
        -ms-perspective: 300px;
            perspective: 300px;

    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: 50% 50%;
            perspective-origin: 50% 50%;
}
.roll:hover {
    background: none;
    text-shadow: none;
}
.roll span {
    display: block;
    position: relative;
    padding: 0 2px;
    pointer-events: none;

    -webkit-transition: all 600ms ease;
       -moz-transition: all 400ms ease;
        -ms-transition: all 400ms ease;
            transition: all 400ms 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:hover span {
    background: rgba(190,190,20,.9);

    -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 );
}
.roll span:after {
    content: attr(data-title);

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 2px;
    white-space: nowrap;

    color: white;
    background: #a533fd;

    -webkit-transform-origin: 50% 0%;
       -moz-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 );
        -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
            transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

17 comments

Previous Page 1 of 2 Next
  1. Gravatar

    thelion.leo@gmail.com

    20 March 2016

    I will use this for my site: www.cebumerchants.com thanks!

  2. Gravatar

    Linda

    03 May 2015

    Can you please specify more Johan, a little more for somebody like me less experienced... how can I use your example code for keeping the ROLL HOVER only specific sentence. And I need larger color around the words like a box. Thanks in advance.

  3. Gravatar

    nikolas

    21 May 2014

    This is really beautiful, although for some reason on my site the replacement text is scaled down and displayed blurry...

    I use this jquery code to dynamically add the data-title and wrap the link text within a span:

    <script type="text/javascript">
    jQuery(document).ready(function($){
    $("body").find("a").wrapInner("<span/>")
    $("span").each(function() {
    $(this).attr("data-title", $(this).html());
    });
    });
    </script>

  4. Gravatar

    makinero

    20 November 2013

    @Ömür Yanıkoğlu : your code disables the effect, it doesn't fix it. Is there any solution to get it work ? It doesn't work with IE9 because it doesn't support transitions but it doesn't work in Chrome, Opera.

  5. Gravatar

    Ömür Yanıkoğlu

    13 August 2013

    Some fixes here: no-csstransforms3d and no-cssreflections

    To use this decisive classes, use Modernizr (http://modernizr.com)

    /* no 3d transform fix */
    .no-csstransforms3d .roll span:after {
    display:none;
    }
    .no-csstransforms3d .roll:hover span {
    color:black;
    background:#ffcc00;
    }
    .no-csstransforms3d .roll:hover span {
    -webkit-transform:none;
    -moz-transform:none;
    -o-transform:none;
    transform: none
    }
    /* ie10 fix */
    .no-cssreflections .roll span:after {
    display:none;
    }
    .no-cssreflections .roll:hover span {
    color:black;
    background:#ffcc00;
    }
    .no-cssreflections .roll:hover span {
    -webkit-transform:none;
    -moz-transform:none;
    -o-transform:none;
    transform: none
    }

  6. Gravatar

    fer

    08 June 2013

    Hi! the jsFiddle example has suddenly stopped working for me (I am using Chrome 27.0.1453.110).

    Very strange, it used to work. Any ideas?

  7. Gravatar

    Mega

    05 June 2013

    I love the effect but it produces 2 errors on every link on W3C validator:
    Every </a> get a "End tag a violates nesting rules" error
    Every </span> get a "Stray end tag span" error

    Any idea on how to avoid these problems?
    Feel free to check my site http://www.ilovemega.com to see the usage I made.

  8. Gravatar

    Loïc

    15 May 2013

    Nice work !
    I try to make it work on IE, any idea ? if it is not possible, what code can i put on the ie stylesheet to delete the effect only on IE.
    Thanks a lot

  9. Gravatar

    Patryk

    30 April 2013

    It doesn't work correctly in IE :(

  10. Gravatar

    Amol Wankhede

    28 April 2013

    Great Work. Thanks.

Previous Page 1 of 2 Next